CSS 文本垂直方向

在 CSS 中，我们可以通过不同的属性来控制文本在垂直方向上的位置和排列方式。本文将介绍常用的 CSS 文本垂直方向属性。

text-align

text-align 属性用于定义文本在水平方向上的对齐方式，常用的取值有：left、center、right。但这里主要介绍这个属性的一个非常特别的取值：vertical-align。

.selector {
  text-align: vertical-align;
}

vertical-align

vertical-align 属性用于设定元素中内联内容（如文本或图片）在垂直方向上的显示方式。该属性可以应用于任何元素，而不仅仅是文本。

该属性的取值有很多，如：baseline、top、middle、bottom，还有其他一些可能看上去有些奇怪的值，比如 text-bottom。

.selector {
  vertical-align: middle;
}

line-height

line-height 属性用于设置元素中文本行的高度。相对单位和绝对单位都可以使用。如果给一个元素设置了固定的高度且希望文本能够垂直居中，则可以使用该属性。

.selector {
  line-height: 2;
}

padding

padding 属性用于设置元素内部的填充（即元素内容和元素边框之间的空间）。通过设置不同的值，我们可以调整元素中内容的垂直位置。

.selector {
  padding-top: 10px;
  padding-bottom: 10px;
}

display: flex

display: flex 是 CSS 中的一种布局方式。通过它我们可以很容易地使元素的内部内容垂直方向居中。

.selector {
  display: flex;
  align-items: center;
  justify-content: center;
}

以上是常用的几种 CSS 文本垂直方向的属性和布局方式，它们可以应用于不同的场景，帮助我们实现各种文本的垂直对齐效果。