中心浮动div项目

Question

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 images 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.

Answer 1

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

您需要指定宽度，以便可以计算适当的边距。

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

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 4

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 5

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