关于 vertical-align 的一些小知识

时间 2019-12-09

标签关于 vertical align 些小知识繁體版

原文原文链接

引子

在平常开发过程当中，咱们常常会遇到以下的场景，一行中既有图片也有文字，并且图片还要和文字对齐。效果以下：
css

一般代码以下:html

<!DOCTYPE html>
<html>
<head>
    <title>Test</title>
    <style type="text/css">
        .text {
            background-color: grey;
        }
    </style>
</head>
<body>
<img src="warn.png"><span class="text">some text.</span>
</body>
</html>

获得的效果倒是这样的：字体

修改下文本为行内块盒子，并设置行高与盒子高度（盒子高度与图片高度相同）一致，效果以下:spa

咱们发现文本区域始终与图片错开了一些。怎么解决呢？设置文字的 margin 或者将图片浮动并非咱们想要的方案。
那么究竟是什么缘由致使了上面的问题呢？各类搜索后，发现其实是行盒子内部在竖直方向上的对齐方式在做祟。
在搜索过程当中发现一篇很不错的介绍 vertical-align 的文章，搬运以下，原文请参考Vertical-Align: All You Need To Know。.net

基本概念

vertical-align 被用来对齐行级元素（inline-level elements）。所谓的行级元素就是那些 display 属性为以下值得元素：3d

inline;
inline-block;
inline-table（不在本文范围内）;

Inline elements 基本上都是一些包含文本的标签（span etc.）。
Inline-block elements，顾名思义，就是行内的块元素，它们能够拥有高度、宽度、内边距、边框和外边距。code

咱们都知道，行级元素沿着当前行依次排列，当当前行已经被填满时会从新建立一行。这些行就是所谓的行盒子（line box）。每一个行盒子的高度依它们各自的内容的高度的不一样而不一样。下图就展现不一样高度的行盒子，红线表示行盒子的上下边界。
htm

在这些行盒子内部，元素经过 vertical-align 属性来进行对齐，那具体是参照什么来对齐呢？blog

baseline 和外边界（outer edges）

对于竖直方向上的对齐来讲，最重要的一个参考点就是元素的 baseline。在某些状况下也会参考元素盒子（element's enclosing box）的上下边界。图片

上图中，红线表示行高的上下边界；绿线表示文字的高度；蓝线表示 baseline 的位置。在左图中，文本的高度与行高相同，红线和绿线重合了。在中间的图中，行高是文本高度的两倍。在右图中，行高是文本高度的一半。

行内元素的外边界与行高的上下边界对齐。若是行高低于文本的高度也没关系，元素的外边界如上图中的红线。
行内元素的 baseline 就是文字所在的线。粗略的说，baseline 的位置就在文本高度的中间往下的某个位置，具体能够参照 W3C 的详细定义。

从左到右依次为：拥有流内（in-flow）内容（一个“c”）的行内块元素，一个拥有流内内容可是设置了 overflow:hidden 的行内块元素，以及一个拥有脱离了文档流的内容的行内块元素。元素的 margin 边界由红线表示，border 为黄色，padding 为绿色，内容为蓝色。每一个行内块元素的 baseline 由蓝色线表示。

行内块元素的外边界就是它的margin盒子（margin-box）的上下边界。也就是上图中的红线标示的区域。
行内块元素的 baseline的位置取决于它是否有流内内容（in-flow content）：

当行内块元素的内容都在文档流中时，元素的 baseline 的位置由元素内容中最后一个元素的 baseline 的位置决定（参考左图）。最后一个元素的 baseline 的位置根据该元素本身的规则肯定。
当行内元素的内容都在文档流中，但 overflow 属性的计算值不为 visible 时，baseline 的位置由 margin 盒子（margin-box）的下边界（bottom-edge）决定（参考中间图）。所以，baseline 的位置与行内块元素的底边界的位置相同。
当行内块元素的内容彻底脱离文档流时，baseline 的位置是 margin 盒子（margin-box）的底边界（参考右图）。

上图中，行盒子（line-box）的上边界与该行中最上部的元素的上边界对齐，下边界与该行中最下部的元素的下边界对齐。

行盒子的 baseline 是可变的，CSS2.1 并未定义行盒子的 baseline。实际上，baseline 的具体位置在计算方程式中是一个自由参数，它的取值依照同时知足 vertical-align 和最小化行高条件而定。
由于行盒子的 baseline 不可见，咱们能够经过在行的开头增长一个字符来肯定 baseline 的位置，正如上图中的 x 同样。若是这个字符没有被指定任何的对齐方式，那么它默认的对齐方式就是 baseline。
在 baseline 的周围，行盒子有个叫作文本盒（text box）的区域。文本盒能够被简单的看做为没有任何对齐方式的行内元素。文本盒的高度与其父元素的字体大小一致。所以，文本盒仅仅包含行盒子中未被格式化的文本。在上图中，绿线标识出来的区域就是文本盒的位置。由于文本盒与 baseline 相关联，所以当 baseline 移动的时候文本盒也会跟着移动。

在 W3C 的文档中，文本盒也被叫作 strut

至此，咱们已经了解了全部的基础知识，总结一下：

每一行中都存在一个行盒子，vertical-align 也仅做用于行盒子。行盒子中包含 baseline，文本盒以及上下边界。
每一行中都有行级元素，每一个行级元素均可以根据某种方式进行对齐，它们都有一个 baseline，上下边界。

vertical-align 的取值

baseline：元素的 baseline 与行盒子的 baseline 对齐。
sub：元素的 baseline 被移动到行盒子的 baseline 的下方。
super：元素的 baseline 被移动到行盒子的 baseline 的上方。
< percentage>：元素的 baseline 位置被相对于行盒子的 baseline 移动一段距离，该距离由行高的百分比肯定。
< length>：元素的 baseline 位置被相对于行盒子的 baseline 移动一段指定的绝对距离。

middle：元素的上下边界之间的中点将与行盒子的 baseline 的位置加上一半 x 的高度后所在的位置对齐。

text-top：元素的上边界与行盒子的文本盒的上边界对齐。
text-bottom：元素的下边界与行盒子的文本盒的下边界对齐。

top：元素的上边界与行盒子的上边界对齐。
bottom：元素的下边界与行盒子的下边界对齐。

更多详细定义请参考 W3C。

小结

回到前面提到的问题，之因此图片与文本始终错开了一些，是由于在行盒子中，图片和文本默认都是与行盒子的 baseline 对齐，也就是说图片的下边界将与 baseline 对齐，固然也就错开了一些。这个问题的修改方式就是给图片加上 vertical-align:middle.

关于 vertical-align 的一些小知识

引子

基本概念

baseline 和 外边界（outer edges）

vertical-align 的取值

小结

baseline 和外边界（outer edges）