关于 vertical-align 的一些小知识

最新推荐文章于 2022-03-11 18:29:26 发布

转载最新推荐文章于 2022-03-11 18:29:26 发布 · 90 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/bingooo/p/5628625.html

本文探讨了HTML中图片与文本在行内对齐的问题，解析了vertical-align属性的作用原理及使用方法，帮助开发者解决常见的布局难题。

引子

在日常开发过程中，我们经常会遇到如下的场景，一行中既有图片也有文字，而且图片还要和文字对齐。效果如下：

通常代码如下:

<!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>

得到的效果却是这样的：

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

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

基本概念

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

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

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

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

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

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 移动的时候文本盒也会跟着移动。