CSS垂直居中文本。它爲什麼如此違反直覺？

讓我們從這個答案開始：Is it possible to vertically align text within a div?CSS垂直居中文本。它爲什麼如此違反直覺？

有被稱爲vertical-align CSS屬性，另一個被稱爲line-height 我希望，如果我把一個文本的元素（DIV，跨度，P），這裏面元素已經設置了屬性vertical-align: middle將會計算渲染文本的高度，渲染後的容器元素的高度以及文本將在容器元素中垂直居中。

但根據答案似乎不是這樣的工作方式：

認爲是由於行高。如果您將高度添加到準確的內部文字所在的元素上？也就是說，如果在012px容器中有一個塊爲的字體大小爲10px（理論高度：10px）的文本塊爲60px，文本的最終結果是什麼？大多數肯定在容器的頂部，因爲文本，只會在文本流，高度內側的位置本身：10px的空間

我不明白這一點。線高應該會影響兩條線之間的距離。它應該像一種適用於文本每個字母的保證金頂部一樣工作。直覺上我認爲垂直對齊比'邊緣'更強。

我該如何理解垂直對齊的行爲爲什麼不按預期垂直對齊元素？爲什麼選擇CSS創作者？

#column-content { 
 
     display: inline-block; 
 
     border: 1px solid red; 
 
     position: relative; 
 
    } 
 
    #column-content strong { 
 
     color: #592102; 
 
     font-size: 18px; 
 
    } 
 
    img { 
 
     margin-top: -7px; 
 
     vertical-align: middle; 
 
    } 
 
    span { 
 
     display: inline-block; 
 
     vertical-align: middle 
 
    }

<div id="column-content"> 
 

 
    <img src="http://i.imgur.com/WxW4B.png"> 
 
    <span><strong>1234</strong> 
 
    yet another text content that should be centered vertically</span> 
 
</div>

來源

2014-10-02 Revious

瀏覽器從左上角到右下角讀取像素，所以它不能真正垂直居中，因爲在文本之前的像素將在文本本身之前計算，如果這是有意義的。我不知道如果這會幫助你。 – 2014-10-02 09:46:53

@ Goosebumbs：我不確定理解。我明白，出於效率的原因，瀏覽器使用一種算法，在計算div本身的高度和文本的高度之前計算文本的高度，從而導致系統錯誤，從而使得開發人員.. – Revious 2014-10-02 09:58:36

'vertical-align'不適用於文本佈局。它意味着將元素垂直對齊到其父項。所以這是違反直覺的，因爲你期望它做一些它沒有設計的事情。就像我期望'color'規則設置div的背景顏色，而不是在div中設置文本顏色。 http://phrogz.net/css/vertical-align/index.html – Anthony 2014-10-02 10:00:39

-2

我要感謝安東尼和Alohci他們的意見。如果他們願意接受答案，我會接受他們。

所引用的鏈接給予的原因很好解釋爲什麼垂直對齊似乎並沒有按預期：

總之原因是垂直-align有兩種不同的行爲：

vertical-alig n的表格單元格
內聯元素

在它完全忽略了所有其他元素的垂直對齊。

正如Alohci所建議的，至少有三種其他方式可以在容器中垂直對齊內容：絕對定位，變換和柔性盒。

來源

2014-10-02 10:53:53 Revious

CSS垂直居中文本。它爲什麼如此違反直覺？

回答

相關問題