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

Question

我想在流体布局中设置容器div居中(id: articles_grid的内容必须居中):http://www.benskesblog.com/projects/frontend/project/index.htm

我试过很多方法，但没有一个奏效。(例如:margin: 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在中心&在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/