資訊專欄INFORMATION COLUMN
摘要：如何讓一段文字居中，在人類看來如此簡單的問題，在界卻變成了多年令人頭疼的問題，關于居中的文字如汗牛充棟，但每到用時還是會有問題。關于垂直居中，中最基本的一個屬性就是，要了解，首先要了解基線，因為的缺省值就是。元素放置在父元素的基線上。
如何讓一段文字居中，在人類看來如此簡單的問題，在css界卻變成了多年令人頭疼的問題，關于居中的文字如汗牛充棟，但每到用時還是會有問題。單單一個『中』是什么，在css里就有兩種不同的稱呼：center和middle，水平居中要用center，垂直居中要用middle（到了css3時代引入了更多混亂，flex布局里垂直居中也可以用center了）。
水平居中相對簡單，而垂直居中的問題如果沒有透徹理解的話，即使這一次做出來了，下一次情況稍加不同，又變得無所適從。
關于垂直居中，css中最基本的一個屬性就是vertical-align，要了解vertical-align，首先要了解基線(baseline)，因為vertical-align的缺省值就是baseline。MDN的文檔中只說了一句：baseline: 默認。元素放置在父元素的基線上。
那么這個父元素的基線到底是個什么鬼？怎么才能決定父元素的基線在哪里呢？
先來看一個簡單的例子：
相關css:
.container {
border: 1px solid green;
}
.container img {
width: 300px;
border: 1px solid red;
vertical-align: baseline;
}
.aaa {
display: inline-block;
border: 1px solid red;
vertical-align: baseline;
}
為了清楚起見，我們給每一個元素都加上邊框，并且寫明vertical-align: baseline，然后我們來看一看效果：
注意最左側那個黑點，我們特意要留著它。在這里，可以很清楚地看到，當我們指定vertical-align為baseline的時候，文字是貼著底邊的，但圖片并沒有貼底，而是位于最下面一行文字的中間。也就是說，對于圖片來說，所謂的『父元素的基線』其實指的是最下面一行文字的中間。
這是文字多的情況，那么文字少的情況呢？也是一樣，圖片的底邊始終等于我們最下面一行文字的中間：
現在我們只改動一行代碼，讓img的vertical-align等于middle，這時候，詭異的情況發生了：
因為我們最左側的文字部分的vertical-align還是baseline，而只有右邊的img的vertical-align改成了middle，所以整個父元素的基線向上漂移了，現在文字部分依然對齊向上漂的父元素的基線，而圖片是以自己的中線對齊父元素的基線，這就是middle的作用。
那如果我們倒過來看一下，圖片依然vertical-align: baseline，而文字vertical-align: middle呢？
不出所料，父元素的基線向上漂移，文字元素以自己的中間對齊父元素的基線，而圖片以自己的下邊緣對齊父元素的基線。
最后，我們把文字和圖片的vertical-align都設置為middle：
一般來講，這個才是我們真正想要的結果。
所以結論是說，如果我們想要在父級元素里對兩個或更多行內元素做垂直居中的話，是需要分別給所有元素設置vertical-align: middle的，因為這個屬性不能繼承，所以在container上設置沒有用，需要給每個子元素設置。
感興趣的同學可以來我的Codepen里玩一玩，看看是不是這么回事。
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/112999.html
摘要：用于對齊行內水平元素，即那些屬性為或本文不考慮的元素。元素的基線取決于元素是否具有內容有內容，元素的基線是普通流中最后一個內容元素的基線例如左邊那個。 原文地址：Vertical-Align: All You Need To Know Often I need to vertically align elements side by side. 我經常需要并排地垂直對齊元素。 CSS ...
摘要：用于對齊行內水平元素，即那些屬性為或本文不考慮的元素。元素的基線取決于元素是否具有內容有內容，元素的基線是普通流中最后一個內容元素的基線例如左邊那個。 原文地址：Vertical-Align: All You Need To Know Often I need to vertically align elements side by side. 我經常需要并排地垂直對齊元素。 CSS ...
摘要：關于的條參考線以及。關于和之間的關系。目標元素的的垂直平分線，與父元素內匿名的對齊。垂直平分線，這個容易理解。要比這些字母的頂端再高一些。 前言 關于 vertical-align，我們很容易想到，這不就是告訴我們元素在縱向上和什么對齊的屬性嗎？而事實上，正是這種寬泛的說法導致了我們對其的理解存在許多不確定性。事實上，對齊這兩個字其實牽涉到4個對象：即哪個對象的哪條線，與哪個對象的哪條...
閱讀 3033·2021-10-13 09:39
閱讀 1879·2021-09-02 15:15
閱讀 2438·2019-08-30 15:54
閱讀 1803·2019-08-30 14:01
閱讀 2602·2019-08-29 14:13
閱讀 1411·2019-08-29 13:10
閱讀 2730·2019-08-28 18:15
閱讀 3869·2019-08-26 10:20
