vertical-align 簡明指南

原由

內容垂直居中在前端佈局中, 是常常遇到的需求。雖然能夠用 浮動 float、position:absolute、 來解決, 不過文檔流都會受到影響。
筆者經常使用的是 flex, 用起來順手, 有些地方用起來感受小題大作, 因而就來探究一下 vertical-align 如何作到居中佈局。

初探

要明白 vertical-align 的佈局規則, 有些概念仍是要理清一下。

vertical-align 用來對齊行內元素, 所以咱們設置元素的 display 屬性爲 inline、inline-block or inline-table, inline-table 用的很少, 本文暫不介紹。

行內 和 行內塊元素

one、tow、three 爲行內元素, four 爲行內塊元素

行框: 一個框框包裹了內聯元素, 行框頂部、底部用黑線表示
基線: 默認經過父元素基線對齊行框的元素, 紫色實線
字體高度: 父元素字體高度涉及到 text-top、text-bottom 對齊, 紅色實線
中線: 位於基線上方, 相對基線距離爲小寫字母 x 的一半

<!-- 部分代碼 -->

    <div class="content">
        <span class="center_1">one</span>
        <span class="center_2">two</span>
        <span class="center_3">three</span>
        <div class="center_4">four</div>
        <div style="background-color: rgb(252, 151, 151); height: 10px"></div>
    </div>
    <style>
    .content {
        width: 400px;
        height: 200px;
        background-color: #07c160;
    }

    .center_1 {
        background-color: #1989fa;
    }

    .center_2 {
        font-size: 25px;
        background-color: #9f9f9f;
    }

    .center_3 {
        font-size: 50px;
        background-color: #ff9000;
    }

    .center_4 {
        display: inline-block;
        font-size: 80px;
        background-color: #4e4e4e;
    }
</style>

理解了這三個概念, vertical-align 樣式 就是小菜一碟, 不過在這以前仍是有幾個問題要先告訴你們

**如何肯定父元素基線**: 左邊第一個無樣式子元素文本底部, 肯定父元素基線
**如何肯定父元素字體高度**: 左邊第一個無樣式子元素高度, 肯定父元素字體高度

看到這裏你們可能已經一頭霧水了, 被各類概念混淆了, 別慌穩住。接下來進入實戰, 經過例子增強對概念理解

實戰

top bottom 對齊

top、bottom 是子元素相對行框頂部和底部的對齊方式。

那麼, 很明顯 one、two、被設置了 top 對齊, three 被設置了 bottom 對齊

<!--部分樣式代碼-->

<style>
    .center_1 {
        vertical-align: top;
    }

    .center_2 {
        vertical-align: top;
    }

    .center_3 {
        vertical-align: bottom;
    }

</style>

text-top text-bottom 對齊

text-top、text-bottom 是子元素相對父元素字體空間頂部和底部對齊。

結合概念來判斷, 紅線是父元素字體空間, 那麼就很容易判斷, two 是 text-top 對齊, three 和 four 是 text-bottom 對齊

<!--部分樣式代碼-->

<style>

    .center_2 {
        vertical-align: text-top;
    }

    .center_3 {
        vertical-align: text-bottom;
    }

    .center_4 {
        vertical-align: text-bottom;
    }
</style>

middle 對齊

middle 是子元素相對於父元素的中線對齊

那麼就很容易判斷, one、 two、three 是 middle 對齊方式

<!--部分樣式代碼-->

<style>

    .center_1 {
        vertical-align: middle;
    }

    .center_2 {
        vertical-align: middle;
    }

    .center_3 {
        vertical-align: middle;
    }

    .center_4 {
        display: inline-block;
        font-size: 80px;
        background-color: #4e4e4e;
    }
</style>

行框內容垂直居中

可能有這種狀況, 一個子元素高度佔據了行框的高度, 示例中 four 就是這種狀況。由於 four 的高度, 設置 vertical-align 它自身沒有空間移動, 爲了知足對齊方式, 基線要發生移動。

上圖實現了子元素垂直居中, 黑線爲中線。對比上一張圖 (middle 對齊), 不難發現基線和中線向上發生了偏移。其它對其方式也會產生基線偏移的效果, 讀者可自行嘗試。

<!--部分樣式代碼-->

<style>
    .center_1 {
        vertical-align: middle;
    }

    .center_2 {
        vertical-align: middle;
    }

    .center_3 {
        vertical-align: middle;
    }

    .center_4 {
        vertical-align: middle;
    }
</style>

總結

由於用的很少, 其餘對齊方式並無舉例。不過只要弄懂了 行框、 基線、中線 這些概念, 其餘參數處理起來也很簡單。

參考

垂直對齊：vertical-align屬性
【譯】關於vertical-align你應知道的一切