中心浮动div项目

Question

我有：

#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>

我想将这些图像项目放在div中心，让它们彼此相邻，并让它包裹得很好。

我已经尝试了所有的东西，它在IE中工作，在Firefox中断，所以我破解了一些垃圾，然后它在IE中打破。

Answer 1

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

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

Answer 2

摆脱float并开始使用display: inline为item divs。

然后你可以给content一个text-align: center - 应该工作。

顺便说一句，在语义上，这样的结构可能会更好 - 当然，这取决于那些div代表什么。

<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

好的，这是我在所有浏览器中工作的内容：

#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? */

编辑：不需要宽度

Answer 4

这是你想要达到的目的吗？ （您需要调整页面大小才能看到换行效果）

djgdesign.co.uk

Answer 5

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