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 div使用item。

然后你可以给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}

中心浮动div项目

5 个答案: