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你应知道的一切