Wrapper Div and Inner Div center align

Question

Here is my html code looks alike.

<div style="width:70%; margin:0px auto; border:1px solid #000;">

<div style="float:left; width:100px; border:1px solid #000;">Test</div>
<div style="float:left; border:1px solid #000;">Test</div>

</div>

The output result looks like this.

http://imm.io/7PWG

As you can see, the wrapper div is at the center of the browser but two of the inner div are on the left side. I want them to be in the center of the wrapper div.

Any ways to do it ? Please help me out. Thanks.

Answer 1

display: inline-block can do this in a reasonably simple way:

<div style="width:70%; margin:0px auto; border:1px solid #000; overflow:hidden; text-align:center">
    <div style="display:inline-block; vertical-align:top; text-align:left">
        <div style="float:left; width:100px; border:1px solid #000;">Test</div>
        <div style="float:left; border:1px solid #000;">Test</div>
    </div>
</div>

See: http://jsfiddle.net/LJaDd/

• I wrapped a new div around your inner two divs, and gave it display: inline-block.
• I added text-align: center to the outer div to center the wrapper div, then added text-align: left to the wrapper div to align the text inside back to the left.
• I added overflow: hidden to the outer div so that it contains the floated divs.