line-height 和 vertical-align 行高与行对齐精解 （图文）

关于“line-height和vertical-align行高与行对齐精解”的攻略，我会分为以下几个部分来进行详细讲解：

1. 什么是行高和行对齐
2. line-height属性的使用
3. vertical-align属性的使用
4. 优化行对齐的技巧

什么是行高和行对齐

在网页中，每一行的文本或者其他内容都是通过一个包裹元素来进行呈现的，这个包裹元素就是行框（line box）。而与行框相关联的有两个概念，分别是行高（line-height）和行对齐（vertical-align）。

行高就是指行框的高度，它的值通常是一个长度单位，比如像素（px）、百分比（%）等。行高决定了行框的总高度，也就是说，在默认情况下，行框的高度等于行高，而其中的文本或其他内容则在行框的中央垂直对齐。

而在英文或数字等字符比较单一的情况下，行框的高度与内容的高度相等，但在有些情况下，比如中文字符中就会存在字符下方的部分（如“乘”、“口”等），这就可能导致行框高度与内容高度不一致。此时，需要使用行对齐来解决。

行对齐就是控制行框中内容的垂直对齐方式。在默认情况下，行框中的所有内容会以基线（baseline）对齐。而基线是指不同字母或字符的底部对齐线的水平线，具体位置视字体而定。

line-height属性的使用

line-height属性可以用来设置行高，其值通常是一个非负数。该属性既可以应用于块级元素，也可以应用于行内元素。

语法

selector {
  line-height: normal | number | length | percentage;
}

• normal：默认值，表示使用浏览器默认的行高，通常是由字体大小和字体样式决定的。
• number：数字，表示行高是字体大小的倍数，比如“1.5”表示1.5倍字体大小的行高。
• length：长度值，表示行高是一个固定的数值，比如px、rem等。
• percentage：百分比值，表示行高是字体大小的百分比，比如“150%”表示行高是字体大小的1.5倍。

示例

<p class="normal">这是一段没有设置行高的普通文本。</p>
<p class="number">这是一段设置行高为1.5倍的文本。</p>
<p class="length">这是一段设置行高为20px的文本。</p>
<p class="percentage">这是一段设置行高为150%的文本。</p>

.normal {
  line-height: normal;
}

.number {
  line-height: 1.5;
}

.length {
  line-height: 20px;
}

.percentage {
  line-height: 150%;
}

vertical-align属性的使用

在使用vertical-align属性之前，需要先了解基线（baseline）和行框（line box）的概念。

基线是字符或字母下部对齐线的位置，而行框则是用来包裹字符或字母的虚拟矩形框。在默认情况下，行框的高度等于字符的高度，而基线则处在字符下部的对齐位置上。

vertical-align属性可以控制行框中的文本或其他内容相对于基线（或其他参照物）的垂直对齐方式。该属性可以应用于行内元素和表格单元格等元素。

语法

selector {
  vertical-align: baseline | sub | super | text-top | text-bottom | middle | top | bottom | length | percentage;
}

• baseline：元素内容基线与父元素基线对齐；默认值。
• sub：元素基线下移至父元素下标线位置。
• super：元素基线上移至父元素上标线位置。
• text-top：放置在元素最高文本行的顶部。
• text-bottom：放置在元素最低文本行的底部。
• middle：居中对齐。
• top：置于父元素顶部。
• bottom：置于父元素底部。
• length：将元素相对于基线向上或向下移动具体像素数值。
• percentage：将元素相对于基线向上或向下移动相对于行高的百分比数值。

示例

<p class="example1">这是一段没有设置vertical-align的普通文本。</p>
<p class="example2"><span>这是一段设置垂直对齐方式为中心的文本。</span></p>

.example2 {
  height: 60px;
  border: 1px solid black;
  text-align: center;
}

.example2 span {
  display: inline-block;
  vertical-align: middle;
}

优化行对齐的技巧

在实际应用场景中，有些情况下，文本或其他内容的上下部分会分布得比较不均匀，这样就可能导致行框高度和文本高度不一致，同时也会影响到行对齐。此时，我们需要采用一些技巧来优化行对齐效果。

1. 使用line-height属性设置行高时，可以设置行高为偶数值，这样行框就能够将字母或字符的上下部分对称地分配到两侧，达到更好的实现自然的行框对齐效果。
2. 在一些情况下，可以使用前后文本的上下部分对齐方式来实现优化，比如可以将后方文本加上假图标，使得后方文本与前方文本的对齐方式变得相同。
3. 通过通过调整padding值来实现优化，在某些情况下，可以通过调整padding的值来让内容在行框中居中对齐，从而达到优化行对齐的效果。

总结

行高和行对齐是网页排版中比较重要的概念。line-height属性可以用来设置行高，而vertical-align属性可以用来控制内容在行框中的垂直对齐方式。在使用这些属性时，需要了解基线和行框的相关知识，以及一些优化行对齐的技巧。