對齊一個div水平，以

頁面

<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來在頁面的中心對齊。我該怎麼做？謝謝！

來源

2011-12-11 zuzuleinen

http://stackoverflow.com/questions/953918/how-to-align-a-div-to-the-middle-of-the-page – webKite

必須爲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; 
}

來源

2011-12-11 18:26:49 Cyclonecode

有沒有辦法做到這一點，沒有設置寬度？無論寬度如何，我都希望我的div能夠居中。 – zuzuleinen

@zuzuleinen，只有當您使用JavaScript來居中。否則，你必須指定一個寬度。 –

我想你可以爲你的div設置一個'max-with'。 – Cyclonecode

<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>

來源

2011-12-11 18:27:43 danludwig

您到克里斯特·安德森的留言中提到你想要的div居中無論寬度。但是你必須提供某種寬度信息。如果你想在div是靈活的寬度，但隨後中心需要設置特定等於邊距：

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

見http://jsfiddle.net/jBYZq/。

問題是，您必須設置元素的寬度並使用margin: 0 auto或設置元素的邊距相等。但是必須設置一些東西來讓它集中。

來源

2011-12-11 19:48:39 ScottS

對齊一個div水平，以

回答

相關問題