資訊專欄INFORMATION COLUMN
摘要：如何讓一段文字居中，在人類看來(lái)如此簡(jiǎn)單的問(wèn)題，在界卻變成了多年令人頭疼的問(wèn)題，關(guān)于居中的文字如汗牛充棟，但每到用時(shí)還是會(huì)有問(wèn)題。關(guān)于垂直居中，中最基本的一個(gè)屬性就是，要了解，首先要了解基線，因?yàn)榈娜笔≈稻褪?。元素放置在父元素的基線上。
如何讓一段文字居中，在人類看來(lái)如此簡(jiǎn)單的問(wèn)題，在css界卻變成了多年令人頭疼的問(wèn)題，關(guān)于居中的文字如汗牛充棟，但每到用時(shí)還是會(huì)有問(wèn)題。單單一個(gè)『中』是什么，在css里就有兩種不同的稱呼：center和middle，水平居中要用center，垂直居中要用middle（到了css3時(shí)代引入了更多混亂，flex布局里垂直居中也可以用center了）。
水平居中相對(duì)簡(jiǎn)單，而垂直居中的問(wèn)題如果沒(méi)有透徹理解的話，即使這一次做出來(lái)了，下一次情況稍加不同，又變得無(wú)所適從。
關(guān)于垂直居中，css中最基本的一個(gè)屬性就是vertical-align，要了解vertical-align，首先要了解基線(baseline)，因?yàn)?b>vertical-align的缺省值就是baseline。MDN的文檔中只說(shuō)了一句：baseline: 默認(rèn)。元素放置在父元素的基線上。
那么這個(gè)父元素的基線到底是個(gè)什么鬼？怎么才能決定父元素的基線在哪里呢？
先來(lái)看一個(gè)簡(jiǎn)單的例子：
相關(guān)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;
}
為了清楚起見(jiàn)，我們給每一個(gè)元素都加上邊框，并且寫(xiě)明vertical-align: baseline，然后我們來(lái)看一看效果：
注意最左側(cè)那個(gè)黑點(diǎn)，我們特意要留著它。在這里，可以很清楚地看到，當(dāng)我們指定vertical-align為baseline的時(shí)候，文字是貼著底邊的，但圖片并沒(méi)有貼底，而是位于最下面一行文字的中間。也就是說(shuō)，對(duì)于圖片來(lái)說(shuō)，所謂的『父元素的基線』其實(shí)指的是最下面一行文字的中間。
這是文字多的情況，那么文字少的情況呢？也是一樣，圖片的底邊始終等于我們最下面一行文字的中間：
現(xiàn)在我們只改動(dòng)一行代碼，讓img的vertical-align等于middle，這時(shí)候，詭異的情況發(fā)生了：
因?yàn)槲覀冏钭髠?cè)的文字部分的vertical-align還是baseline，而只有右邊的img的vertical-align改成了middle，所以整個(gè)父元素的基線向上漂移了，現(xiàn)在文字部分依然對(duì)齊向上漂的父元素的基線，而圖片是以自己的中線對(duì)齊父元素的基線，這就是middle的作用。
那如果我們倒過(guò)來(lái)看一下，圖片依然vertical-align: baseline，而文字vertical-align: middle呢？
不出所料，父元素的基線向上漂移，文字元素以自己的中間對(duì)齊父元素的基線，而圖片以自己的下邊緣對(duì)齊父元素的基線。
最后，我們把文字和圖片的vertical-align都設(shè)置為middle：
一般來(lái)講，這個(gè)才是我們真正想要的結(jié)果。
所以結(jié)論是說(shuō)，如果我們想要在父級(jí)元素里對(duì)兩個(gè)或更多行內(nèi)元素做垂直居中的話，是需要分別給所有元素設(shè)置vertical-align: middle的，因?yàn)檫@個(gè)屬性不能繼承，所以在container上設(shè)置沒(méi)有用，需要給每個(gè)子元素設(shè)置。
感興趣的同學(xué)可以來(lái)我的Codepen里玩一玩，看看是不是這么回事。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/112999.html
摘要：用于對(duì)齊行內(nèi)水平元素，即那些屬性為或本文不考慮的元素。元素的基線取決于元素是否具有內(nèi)容有內(nèi)容，元素的基線是普通流中最后一個(gè)內(nèi)容元素的基線例如左邊那個(gè)。 原文地址：Vertical-Align: All You Need To Know Often I need to vertically align elements side by side. 我經(jīng)常需要并排地垂直對(duì)齊元素。 CSS ...
摘要：用于對(duì)齊行內(nèi)水平元素，即那些屬性為或本文不考慮的元素。元素的基線取決于元素是否具有內(nèi)容有內(nèi)容，元素的基線是普通流中最后一個(gè)內(nèi)容元素的基線例如左邊那個(gè)。 原文地址：Vertical-Align: All You Need To Know Often I need to vertically align elements side by side. 我經(jīng)常需要并排地垂直對(duì)齊元素。 CSS ...
摘要：關(guān)于的條參考線以及。關(guān)于和之間的關(guān)系。目標(biāo)元素的的垂直平分線，與父元素內(nèi)匿名的對(duì)齊。垂直平分線，這個(gè)容易理解。要比這些字母的頂端再高一些。 前言 關(guān)于 vertical-align，我們很容易想到，這不就是告訴我們?cè)卦诳v向上和什么對(duì)齊的屬性嗎？而事實(shí)上，正是這種寬泛的說(shuō)法導(dǎo)致了我們對(duì)其的理解存在許多不確定性。事實(shí)上，對(duì)齊這兩個(gè)字其實(shí)牽涉到4個(gè)對(duì)象：即哪個(gè)對(duì)象的哪條線，與哪個(gè)對(duì)象的哪條...
摘要：因?yàn)榛€的不同，這就會(huì)導(dǎo)致內(nèi)聯(lián)元素在默認(rèn)使用定位時(shí)，會(huì)出現(xiàn)同一行元素的錯(cuò)位問(wèn)題。那么有沒(méi)有和基線一樣的確定準(zhǔn)則呢當(dāng)然有，一個(gè)業(yè)界公認(rèn)的標(biāo)準(zhǔn)就是同一行內(nèi)聯(lián)元素中，中線穿過(guò)的是小寫(xiě)的中點(diǎn)。 暑假前因?yàn)榉N種原因沒(méi)有把百度IFE的先期課程學(xué)完，這個(gè)暑假又參加了相關(guān)項(xiàng)目開(kāi)發(fā)，邊做邊學(xué)也總結(jié)了一些教訓(xùn)?，F(xiàn)在打算寫(xiě)一個(gè)系列的文章，把這種集中學(xué)習(xí)中遇到一些令我的困擾一時(shí)的點(diǎn)好好再總結(jié)一番。而這些因應(yīng)工...
摘要：因?yàn)榛€的不同，這就會(huì)導(dǎo)致內(nèi)聯(lián)元素在默認(rèn)使用定位時(shí)，會(huì)出現(xiàn)同一行元素的錯(cuò)位問(wèn)題。那么有沒(méi)有和基線一樣的確定準(zhǔn)則呢當(dāng)然有，一個(gè)業(yè)界公認(rèn)的標(biāo)準(zhǔn)就是同一行內(nèi)聯(lián)元素中，中線穿過(guò)的是小寫(xiě)的中點(diǎn)。 暑假前因?yàn)榉N種原因沒(méi)有把百度IFE的先期課程學(xué)完，這個(gè)暑假又參加了相關(guān)項(xiàng)目開(kāi)發(fā)，邊做邊學(xué)也總結(jié)了一些教訓(xùn)?，F(xiàn)在打算寫(xiě)一個(gè)系列的文章，把這種集中學(xué)習(xí)中遇到一些令我的困擾一時(shí)的點(diǎn)好好再總結(jié)一番。而這些因應(yīng)工...
閱讀 3074·2021-10-13 09:39
閱讀 1904·2021-09-02 15:15
閱讀 2476·2019-08-30 15:54
閱讀 1831·2019-08-30 14:01
閱讀 2631·2019-08-29 14:13
閱讀 1445·2019-08-29 13:10
閱讀 2755·2019-08-28 18:15
閱讀 3959·2019-08-26 10:20
