CSS 小技巧之三：上下左右對齊

在現今以 display: block、inline、inline-block 為主的排版系統中，要做到上下左右對齊確實有難度，常常都必須借助 table 的排版系統，造成各種不便。

這次要介紹的方法是利用 text-align 與 verticle-align 實現，物件必須要是 inline-block 節點，範例所使用的 html 如下:

<ul>
    <li><img src="#"></li>
    <li><img src="#"></li>
    ...
</ul>

對齊的原理是在容器中，使用偽元素 :before 製作一個高 100% 的 inline-block 物件，並設定為 vertical-align: middle ，讓其他對齊物件 (此例是 li) 參考中線，達到上下對齊的效果。

css 如下:

ul {
    margin: 0;
    list-style: none;
    text-align: center;
}

    .box ul:before { //用來參考用的偽元素
        content: '\200B';
        display: inline-block;
        height: 100%;
        vertical-align: middle;
    }

    .box li {
        display: inline-block;
        vertical-align: middle;
    }

也可以搭配前面講過的分散對齊技巧，做出更多效果。