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或将元素的边距设置为相等。但必须设置一些东西才能使它居中。

将div水平对齐页面中心

3 个答案: