将容器 ul/div 置于流体布局的中心

Question

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

我尝试了很多方法，但没有一个有效。 （例如：边距：0 auto；）。

有人可以告诉我如何解决这个问题吗？

谢谢

Answer 1

我相信改变是非常简单的来实现你所需要的：

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

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

Answer 2

您可以将 display:inline-block 提供给您希望位于中心的 DIV 。在其父 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/