Floating divs centered within another div

Problem

I’ve looked through previous queries and, while this issue appears to be similar to a few others, nothing I’ve found so far seems to answer the difficulty I’m facing.

I have a div that contains several other divs, all of which are floated to the left. Each of these divs has a photo and a caption. The only thing I want is for the photos to be centered within the contained div.

I’ve also placed a clear:both (as suggested in another discussion) after the photographs in the parent divs. Nothing appears to have an effect.

Thank you very much. Any suggestions would be greatly appreciated.

<div style="position: relative; margin: 0 auto; overflow: hidden; text-align: center;">
    <h4>Section Header</h4>

    <div style="margin: 2em auto;">

        <div style="float: left; margin: auto 1.5em;">
            <img src="photo1.jpg" /><br />
             Photo Caption
        </div>
        <div style="float: left; margin: auto 1.5em;">
            <img src="photo2.jpg" /><br />
             Photo Caption
        </div>
        <div style="float: left; margin: auto 1.5em;">
            <img src="photo3.jpg" /><br />
             Photo Caption
        </div>

        <div style="clear: both; height: 0; overflow: hidden;"> </div>

    </div>

</div>

Asked by Darren

Solution #1

Remove the float attribute from the inner divs first. Then, on the main outer div, add text-align: center. Use display: inline-block for the inner divs. It might also be a good idea to give them specific widths.

<div style="margin: auto 1.5em; display: inline-block;">
  <img title="Nadia Bjorlin" alt="Nadia Bjorlin" src="headshot.nadia.png"/>
  <br/>
  Nadia Bjorlin
</div>

Answered by Sampson

Solution #2

Flexbox makes it simple to center floating children horizontally (and vertically) within a div.

As an example, suppose you have simple markup like this:

<div class="wpr">
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
</div>

with CSS:

.wpr
{
    width: 400px;
    height: 100px;
    background: pink;
    padding: 10px 30px;
}

.wpr span
{
    width: 50px;
    height: 50px;
    background: green;
    float: left; /* **children floated left** */
    margin: 0 5px;
}

(THIS IS THE (ANTICIPATED – YET UNDESIRED) RESULT)

To the wrapper, add the following rules:

display: flex;
justify-content: center; /* align horizontal */

The floated youngsters are aligned in the center (DEMO)

Just for fun, you can also get vertical alignment by adding:

align-items: center; /* align vertical */

Answered by Danield

Solution #3

Using relative placement and floating to the right, I was able to do the above.

HTML code:

<div class="clearfix">                          
    <div class="outer-div">
        <div class="inner-div">
            <div class="floating-div">Float 1</div>
            <div class="floating-div">Float 2</div>
            <div class="floating-div">Float 3</div>
        </div>
    </div>
</div>

CSS:

.outer-div { position: relative; float: right; right: 50%; }
.inner-div { position: relative; float: right; right: -50%; }
.floating-div { float: left; border: 1px solid red; margin: 0 1.5em; }

.clearfix:before,
.clearfix:after { content: " "; display: table; }
.clearfix:after { clear: both; }
.clearfix { *zoom: 1; }

JSFiddle: http://jsfiddle.net/MJ9yp/

This works with Internet Explorer 8 and later, but not earlier (surprise, surprise!).

Unfortunately, I don’t recall the source of this method, therefore I can’t offer credit to the original creator. Please share the URL if anyone else knows!

Answered by Kendolein

Solution #4

Inline blocks are not used in the following solution. It does, however, necessitate the use of two helper divs:

Answered by Salman A

Solution #5

display: inline-block; will not work in any of the Internet Explorer browsers. Here’s what I came up with.

// change the width of #boxContainer to 
// 1-2 pixels higher than total width of the boxes inside:

#boxContainer {         
    width: 800px; 
    height: auto;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

#Box{
    width: 240px; 
    height: 90px;
    background-color: #FFF;
    float: left;
    margin-left: 10px;
    margin-right: 10px;
}

Answered by Abdulla Kaleem

Post is based on https://stackoverflow.com/questions/1269245/centering-floating-divs-within-another-div