Center floated div items

Question

I have:

#content { width: 100%;text-align:center; }
.item { float:left;}

And then

...

<div id="content">
    <div class="item"><img /><br />wordsn</div>
    <div class="item"><img /><br />stuff</div>
    <div class="item"><img /><br />asdasdasdn</div>
    <div class="item"><img /><br />Dhdfrhwon</div>
    <div class="item"><img /><br />sewfafdion</div>
</div>

...

I want to center these images items in the div, and have them float next to eachother, and have it wrap nicely. Not working.

I have tried everything and it works in IE and breaks in Firefox so I hack some more crap and then it breaks in IE. I am PHP need CSS.

Answer 1

.item { width: 400px; margin: auto 0; }

You need to specify a width so it can calculate the appropriate margins.

Answer 2

Get rid of float and start using display: inline for the item divs.

Then you can give content a text-align: center - should work.

By the way, semantically, a structure like this might work better - depending on what those divs represent, of course.

<ul id="content">
    <li><img />wordsn</li>
    <li><img />stuff</li>
    <li><img />asdasdasdn</li>
    <li><img />Dhdfrhwon</li>
    <li><img />sewfafdion</li>
</ul>

Answer 3

Is this the kind of thing you are trying to achieve? (you will need to resize the page to see the wrap effect)

djgdesign.co.uk

Answer 4

Okay this is what I got to work across all browsers:

#content {
text-align:center;
}

.item {
     display: -moz-inline-box;
    display:inline-block;
}

* html .item { display:inline; }  /* for IE 6? */
* + html .item { display:inline; }  /* for IE 7? */

edit: width not required

Answer 5

content .item{width:200px;margin:0 auto}