102

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.

Mike
  • 2,862
  • 10
  • 42
  • 55

7 Answers7

230

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

clairesuzy
  • 27,296
  • 8
  • 54
  • 52
  • 3
    Just in case anyone is struggling with the spaces that appear in between the elements, remove the the whitespace in your code by defining your elements like '' or ''. – Maarten Sep 20 '13 at 10:25
  • 1
    Or set the parent element `font-size:0` and restore it on the child. Or use `letter-spacing:-.31em` on the parent and `letter-spacing:0` on the child. – Mike Causer Sep 04 '14 at 02:06
  • @Baumr Use flexbox instead. [There is a example below](http://stackoverflow.com/a/27108510/63849). – Jan Derk Feb 11 '15 at 13:33
  • 3
    you may need to add `vertical-align:middle` while using `display:inline-block`. – ibsenv May 24 '15 at 10:59
50

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.

Jan Derk
  • 2,552
  • 27
  • 22
9

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>
Lauw
  • 1,715
  • 11
  • 12
  • 1
    Posting just code without an explanation is discouraged. Also, `type="text/css"` on a ` – Stephen M Irving Mar 13 '21 at 01:09
  • 1
    @StephenMIrving you replied 10 years after the person initially replied so standards are completely different. – thethiny Nov 04 '22 at 06:17
8

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

.wrapper {

display: table;
margin: auto;

}
goodpixels
  • 503
  • 1
  • 5
  • 20
1

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>
Shaq
  • 11
  • 2
0
.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;
}
Teoman shipahi
  • 47,454
  • 15
  • 134
  • 158
  • Posting just code without an explanation is strongly discouraged. – Stephen M Irving Mar 13 '21 at 01:05
  • 2
    @StephenMIrving c/p same comment with downvote spam also discouraged. Question is: "Aligning a float:left div to center?" and given answer with classes "contentWrapper" and "repeater" is pretty self-explanatory. This is not an answer to a complex algorithm question with code only content. I would suggest you to analyze your judgement before auto botting/spamming code only answers with downvote + same comment. – Teoman shipahi Mar 13 '21 at 21:44
-1
<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>
Mark Bunschoten
  • 11