line-height 与 vertilcal-align

最新推荐文章于 2023-07-11 21:10:49 发布

原创最新推荐文章于 2023-07-11 21:10:49 发布 · 901 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#line-height #vertical-align

本文详细解析了CSS中line-height和vertical-align属性的作用原理及应用技巧，包括如何实现文字和图片的垂直居中，以及解决inline元素下方出现空隙的问题。

关于line-height

如果一个标签没有定义height属性（包括百分比高度），那么其最终表现的高度一定是由 line-height 起作用。
line box 的高度取行内元素的最高高度。
无论 line box 所占据的高度是多少（无论比文字大还是比文字小），其占据的空间都是与文字内容公用水平中垂线的。（如上图）
高度不固定的 div 实现文字垂直居中，使用padding。

关于vertilcal-align

vertical-align 用于垂直对齐 inline 元素，也就是display值为 inline 和 inline-block 的元素。

值	描述
baseline	默认。元素的基线与父元素的基线对齐。
sub	降低元素的基线到父元素合适的下标位置。
super	升高元素的基线到父元素合适的上标位置。
top	把对齐的子元素的顶端与line box顶端对齐。
text-top	把元素的顶端与父元素内容区域的顶端对齐。
middle	元素的中垂点与父元素的基线加1/2父元素中字母x的高度对齐。
bottom	把对齐的子元素的底端与line box底端对齐。
text-bottom	把元素的底端与父元素内容区域的底端对齐。
length
%	使用 `line-height` 属性的百分比值来排列此元素。允许使用负值。
inherit	规定应该从父元素继承 vertical-align 属性的值。

line box

inline 元素一个挨着一个的摆放在行内，当行内元素太多的情况下，一个新行会被创建出来，这些行也叫做 line box，它将行内的所有内容都包裹了起来。
垂直方向上的对齐都是发生在 line box 里面，它有 baseline，有文字盒（图中绿线之间部分），有上下边界（红线）。
inline 元素也有baseline和上下边界（绿线，即 text-top 、text-bottom），inline元素是需要对齐的对象。

关于基线

`inline-block`元素的baseline的位置

在有处于正常流内容的情况下，inline-block 元素的 baseline 就是最后一个作为内容存在的元素的baseline，如下图一。
在 overflow 属性不为 visible 的情况下，baseline是inline-block 元素的margin下边界，如下图二。
在没有内容但是内容区有高度的情况下，baseline是inline-block 元素的margin下边界，如下图三。

图像与文字垂直对齐

<!-- left mark-up -->
<span class="icon middle"></span>
Centered?

<!-- right mark-up -->
<span class="icon middle"></span>
<span class="middle">Centered!</span>

<style type="text/css">
  .icon { display: inline-block;}
  .middle { vertical-align: middle; }
</style>

左图中的文字对齐于 line box 的baseline。而 vertical-align 对齐的点是baseline加上半个x的距离（half of the x-height）。因此文字的最高点超过了图像的高度。
右图中，文字与图像都对齐于一个中点，文字的baseline稍微下移，位于line-box的baseline的下方。达到了图像与文字对齐的效果。

PS：在我自己实际操作的过程中，在一个块级元素内实现图片与文字垂直对齐效果，设置图片的CSS属性 vertical-align 为 middle，这时图片所在行的基线会上升，文字上移，实现图片与文字对齐，（若设置图片的CSS属性 vertical-align 为 text-bottom，图片所在行的基线会相应上升，实现视觉上的文字上移，其它属性值同理可以推断。）如果想让文字与图像实现在块级元素中垂直居中，设置块级元素的 line-height即可。

inline元素下方出现空隙的解决

如上图所示，如果尝试将 li 元素在垂直方向上进行对齐的话，元素下方会出现空隙。代码如下：

<ul>
  <li class="box"></li>
  <li class="box"></li>
  <li class="box"></li>
</ul>

<style type="text/css">
  .box { display: inline-block;}
</style>

原因：inline元素是对齐 baseline 的，baseline 的下方会给字母的一部分留出空间，因此inline元素下方会产生一个空隙。
解决方案：
- 改变line-box的baseline的位置，如将 inline元素的CSS属性设置为vertical-align:middle。
- 设置inline元素的 CSS属性 display:block 。

参考文章：[翻译]关于Vertical-Align你需要知道的事情