vertical-align和baseline的關係

如何讓一段文字居中，在人類看來如此簡單的問題，在css界卻變成了多年使人頭疼的問題，關於居中的文字如汗牛充棟，但每到用時仍是會有問題。單單一個『中』是什麼，在css裏就有兩種不一樣的稱呼：center和middle，水平居中要用center，垂直居中要用middle（到了css3時代引入了更多混亂，flex佈局裏垂直居中也能夠用center了）。

水平居中相對簡單，而垂直居中的問題若是沒有透徹理解的話，即便這一次作出來了，下一次狀況稍加不一樣，又變得無所適從。

關於垂直居中，css中最基本的一個屬性就是vertical-align，要了解vertical-align，首先要了解基線(baseline)，由於vertical-align的缺省值就是baseline。MDN的文檔中只說了一句：baseline: 默認。元素放置在父元素的基線上。

那麼這個父元素的基線究竟是個什麼鬼？怎麼才能決定父元素的基線在哪裏呢？

先來看一個簡單的例子：

<ul>
  <li class="container">
    <div class="aaa">
      aaa<br>bbb<br>ccc<br>ddd<br>eee<br>fff
    </div>
    <img src="https://www.google.com.hk/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png">
  </li>
</ul>

相關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裏玩一玩，看看是否是這麼回事。