居中的div

出於某種原因，我不能得到這個工作： Website 居中的div

（紅色和綠色的盒子將被一旦他們正確定位刪除。）

謝謝您的幫助。

來源

2012-03-06 Brandon

你能解釋一下你想達到什麼嗎？對我來說它不明確 – 2012-03-06 02:54:16

對不起，我覺得這是顯而易見的。我試圖在「黑暗的征服者（Swtor）進入這裏」中心的紅色方塊以及「Reign（Tera）進入這裏」的綠色方塊。 – Brandon 2012-03-06 02:55:52

嘗試與位置沿設置下列屬性

頂部：0; left：0;

您還可以設置頂部或爲了使箱子在中心

，如果你想你的盒子將保持中心格內，然後讓與ID飛濺到位置股利可見光左性質：相對

它會解決你的問題

來源

2012-03-06 02:55:43 Nishant

謝謝！這是我的問題最簡單的解決方案。 – Brandon 2012-03-06 03:17:53

以css爲中心的整體概念很簡單。首先你需要一個相對定位的容器。要居中的子元素必須具有固定的寬度和高度，並且絕對定位在頂部50％和左側50％處，並且頂部和左側邊距必須分別爲寬度和高度的負半邊。換句話說：

<div id="container"> 
    <img src="" alt=""/> 
    <div class="box"></div> 
</div>

。

#container { position: relative; } 
img { dispaly: block; } /* It fills the container */ 
#box { 
    position: absolute; 
    width: 300px; /* Fixed */ 
    height 150px; /* Fixed */ 
    top: 50%; 
    left: 50%; 
    margin-top: -75px; /* 300/2 */ 
    margin-left: -150px; /* 150/2 */ 
}

來源

2012-03-06 02:55:13 elclanrs

只要您知道需要居中的物品的高度，就可以滿足您的需求。如果你不知道身高，事情會變得更加棘手。 – 2012-03-06 02:57:28

是的，在那些情況下，我通常只使用一個簡單的jquery插件http://jsfiddle.net/elclanrs/RMsSh/ – elclanrs 2012-03-06 03:00:08

至於建議，你可以做到這一點與CSS定位壽你看起來是可以嘗試做幫助，你可能會更好使用圖像映射

http://www.w3schools.com/tags/tag_map.asp

這允許您將圖像的某些區域設置爲鏈接。

來源

2012-03-06 02:57:33 SynXsiS