垂直對齊用CSS表不工作

我試圖垂直對齊使用CSS表DIV中一些文字文本，但它並不適用於某些原因：垂直對齊用CSS表不工作

<div class="navlink" style="width:150px; display:table;"> 
<div style="text-align:center; display:table-cell; vertical-align:middle;">Some Text</div> 
</div>

我如何能有什麼建議讓這個代碼工作？

來源

2012-12-15 Shrey Gupta

不要使用表格來垂直對齊，最簡單的方法就是文本的行高設置爲元素的高度，你想讓它在中心。還有其他方法，[這裏]（http://phrogz.net/css/vertical-align/index.html） –

它的工作原理，它只是你沒有使用你的DIV任何高度，所以像這樣做

Demo

<div class="navlink" style="width:150px; display:table;"> 
    <div style="text-align:center; display:table-cell; height: 200px; vertical-align:middle;">Some Text</div> 
</div>

來源

2012-12-15 03:25:09

哈哈，所以我得到-1，至少說出爲什麼？ –

行高不能用2行 – daniel

@丹尼爾哦雅這是一個有效的理由..應該拿出我的回答 –

這是最好的答案，我發現：http://phrogz.net/css/vertical-align/index.html

這出現了很多。沒有簡單的答案。

從網頁A報價：

各種IRC頻道我幫了上一個常見的問題是「我如何垂直中心我的東西，這個區域內」這個問題通常跟着「我正在使用vertical-align：middle，但它不工作！」

這裏的問題有三個方面：

一個HTML佈局傳統上並不是用來指定垂直行爲。就其性質而言，它在橫向上進行縮放，並且基於可用寬度將內容流動到適當的高度。傳統上，水平尺寸和佈局很容易;垂直大小和佈局是從中派生的。

B上的原因垂直對齊：中間是不能做什麼，需要想是因爲筆者不明白什麼是應該做的，但 ...

ç...這是因爲CSS規範真的搞砸了這一個（在我看來） - 垂直對齊用於指定兩個完全不同的行爲，具體取決於它使用的地方。

文章繼續解釋說，有兩種基本方法：絕對定位和其他答案中的行高方法。

來源

2012-12-15 03:25:22 ccleve

對我來說，你只是把桌子的寬度，而不是高度。

<div class="navlink" style="width:150px; display:table;">

---><div class="navlink" style="height:150px; display:table;">

來源

2012-12-15 03:25:48 daniel

'你只要把表格的寬度，而不是height.'的？你正在添加高度... –

把寬度，而不是高度，意味着輸入'寬度'，而不是'高度'。 – daniel

OP已經在使用寬度只看他的問題，你應該說把桌子的高度而不是寬度給我？ –

垂直對齊用CSS表不工作

回答

相關問題