我在頁面上有一個藍色方塊，從頂部和左側是100像素。然後我想讓藍色框中的文字垂直對齊。爲什麼我的代碼不能垂直對齊文本？爲什麼我不能使用CSS來垂直對齊文本？
<!DOCTYPE html>
<html>
<body>
<div style="height:200px; background:blue; display:table-cell; vertical-align:middle; color:white;position:absolute; top:100px; left:100px;">
this is text;
</div>
</body>
</html>
如何讓文本垂直對齊？
備註 - 如果我刪除絕對位置，則文本垂直對齊。但這是不可接受的，因爲我需要絕對的位置來做其他的事情。
包含它在這樣的單獨的div：
CSS
#Div0 {
position:absolute;
top:100px;
left:100px;
}
#Div1 {
height:200px;
background:blue;
display:table-cell;
vertical-align:middle;
color:white;
}
HTML
<div id="Div0">
<div id="Div1">
this is text
</div>
</div>
解決方案實施例：http://jsfiddle.net/rgDfg/
這可以工作，但內聯CSS閱讀凌亂。 – JSuar
我同意，採用CSS並將其放入適當的樣式表中會更清晰。 – ToddBFisher
我們都同意。所以，我更新了。 ：] – JSuar
與CSS最純淨的方式是使用display屬性，像這樣：
#foo { display: table; position: absolute; }
#bar {
display: table-cell;
vertical-align: middle;
height: 200px
}
那麼你的HTML
<div id="foo">
<div id="bar">
Your text
</div>
</div>
應居中..和#foo有它的位置絕對是你不想擺脫..
如果刪除了position: absolute;
所以你ç它會工作SS將這個樣子，
div{
height:200px;
background:blue;
display:table-cell;
vertical-align: middle;
color: white;
}
我需要的位置：絕對的東西，我正在做的。我怎樣才能在保持立場絕對的情況下取得成效？ – John
您可以使用下面的垂直對齊任何
.element {
position: relative;
top: 50%;
transform: translateY(-50%);
}
瞭解更多關於在這裏：http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/
缺少的東西，代碼段 –
確定代碼加回 – John
許多重複項：http://stackoverflow.com/search?q=CSS+vertical+text+align我建議在發佈問題前先搜索stackoverflow。 – JSuar