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.

7 Answers 7

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

4
  • 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 '<img></img><img></img>' or '<img></img><!-- Comment --><img></img>'.
    – Maarten
    Sep 20, 2013 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. Sep 4, 2014 at 2:06
  • @Baumr Use flexbox instead. There is a example below.
    – Jan Derk
    Feb 11, 2015 at 13:33
  • 3
    you may need to add vertical-align:middle while using display:inline-block.
    – ibsenv
    May 24, 2015 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.

2
  • This works for centering horizontally. How about centering vertically as well?
    – Cullub
    Aug 10, 2020 at 21:19
  • To center vertically give the container a height (e.g. height: 500px;) and add align-items: center;
    – Jan Derk
    Aug 11, 2020 at 19:13
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>
2
  • 1
    Posting just code without an explanation is discouraged. Also, type="text/css" on a <style> tag is superfluous and hasn't been necessary for several years now and applying a clear class to a <br> tag is an antipattern. Mar 13, 2021 at 1:09
  • 1
    @StephenMIrving you replied 10 years after the person initially replied so standards are completely different.
    – thethiny
    Nov 4, 2022 at 6:17
8

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

.wrapper {

display: table;
margin: auto;

}
0
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>
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;
}
2
  • Posting just code without an explanation is strongly discouraged. Mar 13, 2021 at 1: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. Mar 13, 2021 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>
1
  • Posting just code without an explanation is strongly discouraged. Mar 13, 2021 at 1:06

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.