CODEWITHSUNDEEP
htmlcss
Mike
Mike

Reputation: 2900

Aligning a float:left div to center?

I want to have a group of images display horizontally across the page. Each image has a few link below it so I need to put a container around each image/link-group.

The closest I have gotten to what I want is putting them in divs that float:left. The problem is I want the containers to align center not left. How can I achieve this.

Upvotes: 104

Views: 206581

Answers (7)

Mark Bunschoten
Mark Bunschoten

Reputation: 11

<html>
<head>
<title>Downloads</title>

<style>
.download-container{
        width:90%;
        margin:0 auto;
        text-align:center;
        border:0px;
        padding:20px;
    }
    .download-cell{
        vertical-align:center;
        height:100px;
        width:340px;
        border:1px solid black;
        border-radius:8px;
        font-size:24px;
        font-color:black;
        z-index:2;
        margin:20px;
        background:white;
        color:black;
        display:inline-block;
        margin:20px;
        padding-top:20px;
    }
</style>
</head>
<body>

<!--DOWNLOADS-->
<div class="download-container">
<br>
    <div class="download-cell">
        <a target="_blank" class="module" href="http://www.woocommerce.com">
        <img src="Images/woo.png" style="width:60px; height:60px;" />
        WooCommerce
        </a>
    </div>
        
    <div class="download-cell">
        <a target="_blank" class="module" href="http://magento.com">
        <img src="Images/magento.png" style="width:60px; height:60px;" />
        MAGENTO
        </a>
    </div>  
        
    <div class="download-cell">
        <a target="_blank" class="module" href="http://www.lightspeedhq.com">
        <img src="Images/lightspeed.png" style="width:60px; height:60px;" />
        LIGHTSPEED
        </a>
    </div>  
    
    <div class="download-cell">
        <a target="_blank" class="module" href="http://www.shopify.com">
        <img src="Images/shopify.png" style="width:60px; height:60px;" />
        SHOPIFY
        </a>
    </div>

    <div class="download-cell">
        <a target="_blank" class="module" href="http://opencart.com">
        <img src="Images/opencart.png" style="width:60px; height:60px;" />
        OPENCART
        </a>
    </div>  
        
    <div class="download-cell">
        <a target="_blank" class="module" href="http://www.prestashop.com">
        <img src="Images/prestashop.png" style="width:60px; height:60px;" />
        PRESTASHOP
        </a>
    </div>
    
    <div class="download-cell">
        <a target="_blank" class="module" href="http://www.wix.com">
        <img src="Images/wix.png" style="width:60px; height:60px;" />
        WIX eCommerce
        </a>
    </div>                                          
</div>

</body>
</html>

Upvotes: -1

Jan Derk
Jan Derk

Reputation: 2980

CSS Flexbox is well supported these days. Go here for a good tutorial on flexbox.

This works fine in all newer browsers:

#container {
  display:         flex;
  flex-wrap:       wrap;
  justify-content: center;
}

.block {
  width:              150px;
  height:             150px;
  background-color:   #cccccc;
  margin:             10px;        
}
<div id="container">
  <div class="block">1</div>    
  <div class="block">2</div>    
  <div class="block">3</div>    
  <div class="block">4</div>    
  <div class="block">5</div>        
</div>

Some may ask why not use display: inline-block? For simple things it is fine, but if you got complex code within the blocks, the layout may not be correctly centered anymore. Flexbox is more stable than float left.

Upvotes: 51

Shaq
Shaq

Reputation: 11

Perhaps this what you're looking for - https://www.w3schools.com/css/css3_flexbox.asp

CSS:

#container {
  display:                 flex;
  flex-wrap:               wrap;
  justify-content:         center;
}

.block {
  width:              150px;
  height:             150px;
  margin:             10px;        
}

HTML:

<div id="container">
  <div class="block">1</div>    
  <div class="block">2</div>    
  <div class="block">3</div>          
</div>

Upvotes: 1

goodpixels
goodpixels

Reputation: 523

Just wrap floated elements in a <div> and give it this CSS:

.wrapper {

display: table;
margin: auto;

}

Upvotes: 8

Teoman shipahi
Teoman shipahi

Reputation: 23132

.contentWrapper {
    float: left;
    clear: both;
    margin-left: 10%;
    margin-right: 10%;
}

.repeater {
    height: 9em;
    width: 9em;
    float: left;
    margin: 0.2em;
    position: relative;
    text-align: center;
    cursor: pointer;
}

Upvotes: 0

Lauw
Lauw

Reputation: 1715

try it like this:

  <div id="divContainer">
    <div class="divImageHolder">
    IMG HERE
    </div>
    <div class="divImageHolder">
    IMG HERE
    </div>
    <div class="divImageHolder">
    IMG HERE
    </div>
    <br class="clear" />
    </div>

    <style type="text/css">
    #divContainer { margin: 0 auto; width: 800px; }
    .divImageHolder { float:left; }
    .clear { clear:both; }
    </style>

Upvotes: 9

clairesuzy
clairesuzy

Reputation: 27674

use display:inline-block; instead of float

you can't centre floats, but inline-blocks centre as if they were text, so on the outer overall container of your "row" - you would set text-align: center; then for each image/caption container (it's those which would be inline-block;) you can re-align the text to left if you require

Upvotes: 232

Related Questions