我如何垂直居中？

This是我正在努力開發的一個頁面。我希望標籤中的文字和泡泡中的電影以居中。沒有發現我找到的東西正常工作。此頁面上的所有內容均爲position: absolute，並以百分比定義，但氣泡中的實際內容除外。我如何垂直居中？

index.css

#movie { 
    margin-top: auto; 
    margin-bottom: auto; 
    display: table-cell; 
    vertical-align: middle; 
    ... 
} 
#movie-bubble { 
    vertical-align: middle; 
    text-align: center; 
    display: table; 
}

root.css

.tab { 
    vertical-align: middle; 
    text-align: center; 
    margin: auto; 
}

我在做什麼錯？

編輯：對人們說display: table-cell,& c：這是行不通的。

來源

2012-12-01 Glycan

垂直對齊隻影響內嵌和inline-塊元素 – Bruno

我發現有幫助：http://blog.themeforest.net/tutorials/vertical-centering-with-css/和http://www.w3.org/Style/Examples/007/center.en.html 。 –

要居中內容div內，做到以下幾點：

對外界div：

display: table;

到裏面div：

display: table-cell; 
vertical-align: middle;

來源

2012-12-01 18:05:01

你需要設置它的DIV in to display: table;

和你試圖居中的文字：

display: table-cell; 
vertical-align: middle;

來源

2012-12-01 18:05:12 jackcogdill

這不起作用，正如我在編輯中解釋的那樣。 – Glycan

看看這個：http://f.cl.ly/items/203E123z122t43033D3I/Screen%20shot%202012-12-01%20at%203.03.32%20PM.png 當然，它的工作原理：P – jackcogdill

這裏是一個[小提琴]（http://jsfiddle.net/cyzVK/2/）以供進一步參考 – jackcogdill

嘗試是這樣的： -

.area { 
width: 300px; 
height: 300px; 
background: url(../images/abe-bg.png) no-repeat; 
position: relative; 
} 

.bubble { 
position: absolute; 
left: 93px; 
top: 21px; 
    width: 135px; 
height: 84px; 
display: table; 
} 

.bubble p { 
display: table-cell; 
vertical-align: middle; 
text-align: center; 
}

檢查了這一點： - http://www.vanseodesign.com/css/vertical-centering/

來源

2012-12-01 18:06:46

我如何垂直居中？

回答

相關問題