将div水平对齐到页面中心

Question

我有这段html代码：

<div id="main" style=" margin:0 auto; ">
    <div style="float: left">
        <a style="display: block" href="#"><img src="test.gif"></a>
        <a style="display: block" href="#"><img src="test.gif"></a>
        <a style="display: block" href="#"><img src="test.gif"></a>
    </div>
    <div style="float: left">
        <a style="display: block;" href="#"><img src="ursus.gif"></a>
    </div>
    <div style="float: left">
        <a style="display: block" href="#"><img src="test.gif"></a>
        <a style="display: block" href="#"><img src="test.gif"></a>
        <a style="display: block" href="#"><img src="test.gif"></a>
    </div>
</div>

我希望#main div在页面中心对齐。 我怎么能做到这一点？ 谢谢！

Answer 1

您必须为div设置width ：

<div id="main" style="margin:0 auto; width:700px;">

我也强烈建议您不要使用内联CSS。 而是在外部样式表中添加类似的内容：

#main {
   margin:0 auto;
   width:700px;
}
#main a {
   display:block;
}
#main > div {
   float:left;
}

Answer 2

<body>
<div id="main" style=" margin:0 auto; width: 960px;">
    <div style="float: left">
        <a style="display: block" href="#"><img src="test.gif"></a>
        <a style="display: block" href="#"><img src="test.gif"></a>
        <a style="display: block" href="#"><img src="test.gif"></a>
    </div>
    <div style="float: left">
        <a style="display: block;" href="#"><img src="ursus.gif"></a>
    </div>
    <div style="float: left">
        <a style="display: block" href="#"><img src="test.gif"></a>
        <a style="display: block" href="#"><img src="test.gif"></a>
        <a style="display: block" href="#"><img src="test.gif"></a>
    </div>
</div>
</body>

Answer 3

您在对Krister Andersson的评论中提到，无论宽度如何，都希望div居中。 但是您必须提供某种宽度信息。 如果要使div宽度灵活但居中，则需要设置特定的相等边距：

#main {
    margin: 0 50px; /* or whatever px, em, or % you want */
}

参见http://jsfiddle.net/jBYZq/ 。

关键是，您必须设置元素的宽度并使用margin: 0 auto或将元素的边距设置为相等。 但是必须进行一些设置才能使其居中。