我有这段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在页面中心对齐。 我怎么能做到这一点? 谢谢!

===============>>#1 票数:5 已采纳

您必须为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;
}

===============>>#2 票数: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>

===============>>#3 票数:2

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

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

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

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

  ask by zuzuleinen translate from so

未解决问题?本站智能推荐: