在流体布局中将容器 ul/div 居中答案

【问题标题】：Center a container ul/div in a fluid layout在流体布局中将容器 ul/div 居中
【发布时间】：2011-11-27 02:06:15
【问题描述】：

我想在一个流畅的布局中将一个容器 div 居中（id:articles_grid 的内容必须居中）： http://www.benskesblog.com/projects/frontend/project/index.htm

我尝试了很多方法，但没有一个奏效。（例如：margin: 0 auto;）。

谁能告诉我如何解决这个问题？

谢谢

【问题讨论】：

标签： html layout css

【解决方案1】：

我相信改变很简单就能达到你的需要：

#articles_grid {
...
text-align: center; /*add this*/
}

#articles_grid li {
...
/* float:left; remove this */
display: inline-block; /*add this*/
}

【讨论】：

好吧，我已将其标记为正确（老实说，我不知道这个选项）！ ;-)

【解决方案2】：

您可以将display:inline-block 给您DIV，并在他的parent DIV 中定义text-align:center。例如，您可以这样做：

CSS：

.parent{
    background:red;
    text-align:center;
}
.center{
    text-align:left;
    display:inline-block;
    *display:inline;/* IE7 */
    *zoom:1;
    background:yellow;
    min-height:100px;
}

HTML：

<div class="parent">
    <div class="center">lorem ipsum</div>
</div>

查看以下示例：

http://jsfiddle.net/aNR3a/

【讨论】：

谢谢桑迪普！但是是否也可以在这个黄色容器中将列表项居中？喜欢：jsfiddle.net/aNR3a/23（以及黄色容器中居中的图像）
@BangBang;对你的 li 也做了同样的事情 jsfiddle.net/aNR3a/43 或者如果你的 li 有固定宽度，那么给 margin: 0 auto;
感谢您的帮助！内联块非常有用。我一直在寻找很多，但我在寻找错误的方向！ :)