首页手记内联元素的两大基石之 vertical-align

内联元素的两大基石之 vertical-align

标签：

Html/CSS CSS3 深度学习

基本概念

vertical-align 用于定义内联元素的垂直对齐方式。
打开浏览器，我们可以看到 vertical- align 的全部属性值：

属性值大致可以分为以下 4 类：

基线对齐：baseline（默认值）、middle；
行框对齐：top、bottom；
内容区域对齐：text-top、text-bottom；
上下标签：sub、super。

除了以上关键字属性值，vertical-align 也支持长度值和百分比值。
下面会依次介绍。

基线对齐

baseline：使内联元素的基线与其所在行盒子的基线对齐。

例子：

<style>
    p {
        border: 2px #FF9800 solid;
        text-align: center;
    }
    
    span {
        background-color: #eee;
        padding: 5px 10px;
        margin-left: 5px;
    }
    
    span:first-child {
        font-size: 26px;
    }
    
    span:nth-child(2) {
        display: inline-block;
        height: 50px;
    }
    
    span:last-child {
        display: inline-block;
        height: 50px;
    }
</style>

<p>
    x Which <span>would</span><span>you give <br>up?</span><span></span>
</p>

middle：使内联元素的垂直中心位置与其所在行盒子基线高度的1/2处对齐。

例子：

<style>
    div {
        border: 1px sandybrown solid;
        text-align: center;
        padding: 3px;
    }
    
    strong {
        background-color: silver;
        vertical-align: middle;
    }
    
    input {
        border: 1px #03A9F4 solid;
        vertical-align: middle;
        width: 70px;
    }
</style>

<div>
    x<strong>Hello</strong><input type="text" value="world">
</div>

更多关于基线的介绍，可以参考：内联元素的两大基石之基线

行框对齐

top：使内联元素的顶部与其所在行盒子的上边框对齐。
bottom：使内联元素的底部与其所在行盒子的下边框对齐。

例子：

<style>
    p {
        border: 2px #FF9800 solid;
        text-align: center;
        line-height: 80px;
    }
    
    span {
        display: inline-block;
        line-height: 1.5;
        background-color: #03A9F4;
        padding: 5px 10px;
        color: #fff;
    }
    
    span:first-child {
        vertical-align: top;
    }
    
    span:last-child {
        vertical-align: bottom;
    }
</style>

<p>
    <span>x</span><span>y</span>
</p>

例子中，我们可以看到，第一个 span 与最后一个 span 分别紧贴着行盒子的上下边框显示。

内容区域对齐

text-top：使内联元素的顶部与其行盒子内容区域(1)的上边缘对齐。
text-bottom：使内联元素的底部与其行盒子内容区域的下边缘对齐。

*(1)在开发者模式下，当鼠标放在元素上，可以大致显示内容区域的范围。

例子：

<style>
    p {
        border: 2px #FF9800 solid;
        text-align: center;
        font-size: 60px;
        line-height: 150px;
    }
    
    span {
        display: inline-block;
        line-height: 1.5;
        background-color: #03A9F4;
        padding: 5px 10px;
        color: #fff;
    }
    
    span:first-child {
        vertical-align: text-top;
    }
    
    span:last-child {
        vertical-align: text-bottom;
    }
</style>

<p>
    Content<span>x</span><span>y</span>
</p>

例子中，我们可以看到，第一个 span 与最后一个 span 分别和内容区域上下边缘对齐。
有关于内容区域的范围，一直是比较模糊，因为它肉眼不可见。按照规范，它的高度应该是 1em，因此，内容区域大小会受到 font-family 和 font-size 的影响。这一点，在出现混排替换元素的时候尤其要注意，替换元素会撑起行盒子的高度，但不会改变内容区域的大小。

例子：

<style>
    p {
        border: 2px #FF9800 solid;
        text-align: center;
        font-size: 60px;
        line-height: 150px;
    }
    
    span {
        display: inline-block;
        line-height: 1.5;
        background-color: #03A9F4;
        padding: 5px 10px;
        color: #fff;
    }
    
    span:first-of-type {
        vertical-align: text-top;
    }
    
    span:last-of-type {
        vertical-align: text-bottom;
    }
    
    canvas {
        width: 30px;
        height: 200px;
        background-color: chartreuse;
    }
</style>

<p>
    Content<canvas></canvas><span>x</span><span>y</span>
</p>

上下标签

super 与 sub 分别表示下标和上标，在 html 中也有对应的标签，sup 与
sub。这两个属性值的作用比较单一，只能用来实现对垂直位置要求不高的上标下标效果。

例子：

<style>
    h1 {
        text-align: center;
        background-color: thistle;
    }
    
    span,
    i {
        vertical-align: sub;
        font-size: 14px;
    }
    
    i {
        font-style: normal;
        vertical-align: super;
    }
</style>

<h1>
    H<span>2</span>O<i>@</i>
</h1>

长度值或百分比值

vertical-align 取长度值或百分比值，都是相对于基线往上( 正值 )或往下( 负值 )偏移。
其中，百分比值是相对于 line-height 计算的。

例子：

<style>
    div {
        border: 1px sandybrown solid;
        text-align: center;
        padding: 3px;
    }
    
    span {
        padding: 0 5px;
    }
    
    span:first-child {
        background-color: #FF9800;
        vertical-align: 20px;
    }
    
    span:last-child {
        background-color: #CDDC39;
        vertical-align: -20px;
    }
</style>

<div>
    x
    <span>love</span>
    <span>you</span>
</div>

vertical-align 与单元格

vertical-align 属性也可以设置单元格( td 或 display 取值 table-cell 的元素 )中的内容的垂直对齐方式。

例子：

<style>
    div {
        display: table;
        width: 100%;
        height: 120px;
        border: 2px slateblue solid;
    }
    
    span {
        display: table-cell;
        text-align: center;
        background-color: tan;
        border: 4px #fff solid;
        width: 25%;
    }

    /* sub、super、text-top、text-bottom 效果与 baseline 相同 */ 
    span:first-of-type {
        vertical-align: baseline;
        border-right-width: 2px;
    }
    
    span:nth-of-type(2) {
        vertical-align: top;
        border-left-width: 2px;
        border-right-width: 2px;
    }
    
    span:nth-of-type(3) {
        vertical-align: middle;
        border-left-width: 2px;
        border-right-width: 2px;
    }
    
    span:last-of-type {
        vertical-align: bottom;
        border-left-width: 2px;
    }
</style>

<div>
    <span>baseline</span>
    <span>top</span>
    <span>middle</span>
    <span>bottom</span>
</div>

例子中，我们可以发现，在 table-cell 元素上设置 vertical-align 属性，但实际是在其子元素上发生作用。就算 table-cell 元素的子元素是一个块级元素，也一样可以设置其垂直对齐方式。

例子：

<style>
    div {
        display: table;
        width: 100%;
        height: 120px;
        border: 2px slateblue solid;
    }
    
    span {
        display: table-cell;
        text-align: center;
        background-color: tan;
        border: 4px #fff solid;
        vertical-align: middle;
    }
    
    p {
        margin: 0;
    }
</style>

<div>
    <span><p>middle</p></span>
</div>

vertical-align 与 line-height

上面的内容中，简单介绍过 vertical-align 与 line-height 的关系，即 vertical-align 的百分比值是相对于 line-height 计算的。但它们的关系远远不止于此，甚至可以说，只要有内联元素，vertical-align 与 line-height 就一定同时出现，如果再加上" 透明文本节点 "的概念，那么很多内联元素排版的怪异表现，就都可以解释得通了。

怪异表现1：line-height 无效

首先，看一个正常的例子：

例子：

<style>
    p {
        line-height: 30px;
        background-color: #9E9E9E;
    }
    
    span {
        background: #eee;
    }
</style>

<p>
    x-<span>x-jquery</span>
</p>

例子中，span 继承了 p 的 line-height 属性，因此行高为 30px，p 最终的高度也是 30px。
如果 span 中的字体变大，会发生什么呢？

例子：

<style>
    p {
        line-height: 30px;
        background-color: #9E9E9E;
    }
    
    span {
        font-size: 20px;
        background: #eee;
    }
</style>

<p>
    x-<span>x-jquery</span>
</p>

显而易见，字体大小不同，影响了 p 的最终高度。
首先，p 上设置的 line-height 属性不但继承给了 span，也同样继承给了透明文本节点( span 前面的 x 便于观察此节点 )，此时，两者行高都是 30 px；
然后，内联元素默认 baseline 对齐，字体越大，基线越低，这就导致 span 发生向上移动；
最终，line-height 设置的 30px 无效。

知道了原因，那么优化方法也就变得简单了：让透明文本节点和 span 中字体一样大，修改 span 的 baseline 对齐为 top 对齐等等。

例子：

<style>
    p {
        line-height: 30px;
        background-color: #9E9E9E;
    }
    
    span {
        font-size: 20px;
        vertical-align: top;
        background: #eee;
    }
</style>

<p>
    x-<span>x-jquery</span>
</p>

怪异表现2：替换元素下面的空白区域

如果块级元素的子元素为替换元素，那么块级元素的的高度值总会比替换元素的高度值大。

例子：

<style>
    div {
        border: 1px sienna solid;
    }
    
    canvas {
        width: 80%;
        height: 50px;
        background-color: thistle;
    }
</style>

<div>
    x-<canvas></canvas>
</div>

例子中，替换元素 canvas 的下边缘与 div 的下边框有一条很明显的空隙。
首先，内联元素默认 baseline 对齐，因此，透明文本节点( canvas 前面的 x 便于观察此节点 )的基线与 canvas 的基线( canvas 的下边缘 )对齐；
然后，内联元素默认的 line-height 取值 normal，通常为 1.3 左右，这就导致透明文本节点往下一定有半个行距；
最终，替换元素下面出现了空白的缝隙。

知道了原理，那么要清除这个间隙则变得容易：设定透明文本节点的 line-height 为 0( 或者 font-size 为 0 )，修改替换元素 baseline 对齐为 top、middle、 bottom 对齐等等。

例子：

<style>
    div {
        line-height: 0;
        border: 1px sienna solid;
    }
    
    canvas {
        width: 80%;
        height: 50px;
        background-color: thistle;
    }
</style>

<div>
    x-<canvas></canvas>
</div>

怪异表现3：margin 无效

例子：

<style>
    div {
        border: 1px sienna solid;
        margin-top: 40px;
    }
    
    canvas {
        width: 80%;
        height: 50px;
        margin-top: -999px;
        background-color: thistle;
    }
</style>

<div>
    x-<canvas></canvas>
</div>