Center floated div items

I have:

#content {
  width: 100%;
  text-align: center;
}

.item {
  float: left;
}

<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 im开发者_运维技巧ages items in the div, and have them float next to each other, and have it wrap nicely.

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.

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

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

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>

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

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

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