詳解verticalalignment

一、含義

在前端開發中，vertical-alignment是一個很基礎卻容易被忽略的屬性，嚴格意義上來說，這個屬性並沒有單獨的設置方式，而是囊括在了display:inline-block、display:table-cell等多個屬性之中。它控制的是元素在垂直方向上的位置。

二、display:inline-block

在使用display:inline-block模式下，vertical-align屬性的取值對其所含所有子元素全部生效。vertical-align的默認值是baseline。baseline並不表示基線或底線的意思，而相對於有基線概念的元素來說，元素的最下端會與基線對齊，元素頂部則可能超過基線位置。

    <div style="display:inline-block; vertical-align: middle">
        <img src="example.jpg">
        <p style="display:inline-block">這是一段文字</p>
    </div>

在這個例子中，垂直對齊方式設為middle，子元素的位置就會在垂直正中央。

三、display:table-cell

在使用display:table-cell模式下，vertical-align屬性的取值只對其所直接包含的文本子元素或行內子元素（沒有被特a意化為塊狀或表格單元格）起作用。垂直方向上的空隙優先分配給頂部對齊的元素，其次是bottom對齊的元素，而middle則會均分兩側，導致元素的位置出現1像素的偏移。

    <div style="display: table; vertical-align: middle">
        <div style="display: table-cell">
            這是一段文字。
        </div>
        <div style="display: table-cell">
            這是一張圖片。
            <img src="example.jpg">
        </div>
    </div>

在這個例子中，垂直對齊方式也被設為middle，子元素的位置會在容器中垂直正中央，在這之中，容器通過table元素來實現縱向分割的效果。

四、使用absolute + top/bottom + margin-top/margin-bottom

在容器元素上設置position:relative，同時，對要垂直居中的子元素分別使用top: 50%;和bottom: 50%；然後再通過margin-top和margin-bottom來微調垂直位置。

    <div style="position: relative; height: 200px;">
        <p style="position: absolute; top: 50%; margin-top: -10px;">這是一段文字</p>
    </div>

在這個例子中，需要購入position: relative來佔據父容器位置，同時子元素使用position: absolute，繼承父容器的top和bottom高度，通過margin-top的負值來對元素位置進行微調。

五、使用flexbox

使用flexbox布局來進行元素垂直方向上的對齊是十分方便的。通過將父容器設為display:flex;之後再通過align-items:center來實現子元素的垂直居中。

    <div style="display: flex; align-items:center;">
        <p>這是一段文字</p>
    </div>

在這個例子中，父容器使用display:flex來啟用flexbox模式，子元素在默認情況下被繼承了父容器的垂直居中樣式。

總結

以上就是vertical-alignment在前端開發中的幾種使用方式以及其原理，這個屬性雖然看起來簡單，但是理解得當卻可以事半功倍。大家在使用這個屬性的時候，需要注意一些細節方面的處理，並根據實際情況選擇合適的方式。