实现 CSS 中的文本对齐

在 CSS 中，文本对齐是一种控制文本水平和垂直位置的方法。可以通过以下 CSS 属性来实现文本对齐：

• text-align: 控制文本水平对齐方式，如左对齐、右对齐、居中对齐、两端对齐等；
• vertical-align: 控制文本垂直对齐方式，如顶部对齐、底部对齐、居中对齐等。

下面将分别介绍这两个属性的使用方法，以实现文本对齐的效果。

1. text-align 属性

1.1 水平对齐方式

text-align 属性可以控制文本在其容器中的水平对齐方式。常见的值有：

• left 左对齐
• right 右对齐
• center 居中对齐
• justify 两端对齐（单词间的间隔会自动调整，使得每一行的文本长度相等）

下面是一个示例代码，可以清晰地展示不同水平对齐方式的效果：

.container {
  text-align: left; /* 左对齐 */
}

.container-right {
  text-align: right; /* 右对齐 */
}

.container-center {
  text-align: center; /* 居中对齐 */
}

.container-justify {
  text-align: justify; /* 两端对齐 */
}

1.2 text-align-last 属性

如果你使用的浏览器支持 text-align-last 属性，那么你还可以控制最后一行的水平对齐方式。常见的值有：

• auto 根据 text-align 属性的值来确定，若为 justify 则自动对齐到左侧
• left 左对齐
• right 右对齐
• center 居中对齐
• justify 两端对齐（仅针对最后一行）

.container-last {
  text-align: justify; /* 左对齐 */
  text-align-last: center; /* 最后一行居中对齐 */
}

2. vertical-align 属性

2.1 垂直对齐方式

vertical-align 属性可以控制文本在行内元素中的垂直对齐方式。常见的值有：

• top 顶部对齐
• middle 居中对齐
• bottom 底部对齐

下面是一个示例代码，可以清晰地展示不同垂直对齐方式的效果：

span {
  display: inline-block;
  height: 50px;
  width: 50px;
  border: 1px solid black;
}

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

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

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

2.2 line-height 属性

注意到上面的代码中，我们设置了 span 元素的高度是固定的，这可能并不适用于所有情况。此时你可以使用 line-height 属性，来控制垂直对齐方式，同时又不需要对元素设置固定高度。

line-height 属性可以控制行间距，以及垂直对齐方式。通过设置 line-height 与 font-size 之比的值，可以实现不同的垂直对齐方式。常见的比值有：

• 1：中心对齐
• 1.5：顶部和底部分别留有 1/4 行间距，文字垂直居中
• 2：顶部和底部分别留有 1/3 行间距，文字垂直居中
• 3：顶部和底部分别留有 1/2 行间距，文字垂直居中

下面是一个示例代码，可以清晰地展示不同垂直对齐方式的效果：

span {
  display: inline-block;
  font-size: 20px;
  border: 1px solid black;
}

.line-height-1 {
  line-height: 20px; /* 1: 垂直居中 */
}

.line-height-1-5 {
  line-height: 30px; /* 1.5: 垂直居中 */
}

.line-height-2 {
  line-height: 40px; /* 2: 垂直居中 */
}

.line-height-3 {
  line-height: 60px; /* 3: 垂直居中 */
}

结语

通过 text-align 和 vertical-align 属性，以及在必要时的 line-height 属性，我们可以实现文本在元素中的水平和垂直对齐。这为我们在页面布局和排版中提供了强有力的支持。