CSS3 文本样式 - vertical-align 属性

核心知识点

vertical-align 属性的概念

vertical-align 属性用于控制内联元素（inline）、内联块元素（inline-block）和表格单元格（table-cell）的垂直对齐方式。它不影响块级元素的垂直对齐。

vertical-align 属性的值

值	描述
baseline	默认值，将元素的基线与父元素的基线对齐
sub	将元素的基线与父元素的下标基线对齐
super	将元素的基线与父元素的上标基线对齐
top	将元素的顶部与父元素的顶部对齐
text-top	将元素的顶部与父元素的文本顶部对齐
middle	将元素的垂直中点与父元素的基线加上半个 x-height 的高度对齐
bottom	将元素的底部与父元素的底部对齐
text-bottom	将元素的底部与父元素的文本底部对齐
length	将元素的基线与父元素的基线加上指定的长度对齐
percentage	将元素的基线与父元素的基线加上指定百分比的行高对齐

注意事项

vertical-align 属性只适用于内联元素、内联块元素和表格单元格
对于表格单元格，vertical-align 的值会有所不同（如 top, middle, bottom, baseline）
vertical-align 的效果取决于元素的 display 属性和父元素的上下文

学习目标

理解 vertical-align 属性的作用和不同值的效果
掌握如何使用 vertical-align 属性控制内联元素的垂直对齐方式
了解如何使用 vertical-align 属性控制表格单元格的垂直对齐方式
能够根据不同场景选择合适的 vertical-align 值

代码示例

基本用法示例（内联元素）

/* 示例 1: 不同 vertical-align 值 */
.baseline {
  vertical-align: baseline;
}

.sub {
  vertical-align: sub;
}

.super {
  vertical-align: super;
}

.top {
  vertical-align: top;
}

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

.middle {
  vertical-align: middle;
}

.bottom {
  vertical-align: bottom;
}

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

.length {
  vertical-align: 10px;
}

.percentage {
  vertical-align: 20%;
}

/* 通用样式 */
span {
  display: inline-block;
  width: 60px;
  height: 60px;
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  text-align: center;
  line-height: 60px;
  margin: 0 5px;
}

p {
  border: 1px solid #333;
  padding: 10px;
  margin-bottom: 20px;
  height: 100px;
  line-height: 100px;
}

HTML 结构（内联元素）

<p>
  这是一段文本，包含不同垂直对齐方式的元素：
  <span class="baseline">baseline</span>
  <span class="sub">sub</span>
  <span class="super">super</span>
  <span class="top">top</span>
  <span class="text-top">text-top</span>
  <span class="middle">middle</span>
  <span class="bottom">bottom</span>
  <span class="text-bottom">text-bottom</span>
  <span class="length">length</span>
  <span class="percentage">percentage</span>
</p>

表格单元格示例

/* 表格单元格的 vertical-align */
table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 20px;
}

td {
  border: 1px solid #333;
  padding: 10px;
  height: 80px;
  width: 25%;
}

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

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

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

.td-baseline {
  vertical-align: baseline;
}

HTML 结构（表格单元格）

<table>
  <tr>
    <td class="td-top">top - 垂直顶部对齐</td>
    <td class="td-middle">middle - 垂直居中对齐</td>
    <td class="td-bottom">bottom - 垂直底部对齐</td>
    <td class="td-baseline">baseline - 基线对齐</td>
  </tr>
</table>

图片与文本对齐示例

/* 图片与文本的对齐 */
img {
  width: 50px;
  height: 50px;
  margin-right: 10px;
}

.img-baseline {
  vertical-align: baseline;
}

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

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

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

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

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

HTML 结构（图片与文本）

<p>
  <img src="https://trae-api-cn.mchost.guru/api/ide/v1/text_to_image?prompt=simple%20icon&image_size=square" alt="icon" class="img-baseline">
  baseline - 图片与文本基线对齐
</p>

<p>
  <img src="https://trae-api-cn.mchost.guru/api/ide/v1/text_to_image?prompt=simple%20icon&image_size=square" alt="icon" class="img-middle">
  middle - 图片与文本垂直居中对齐
</p>

<p>
  <img src="https://trae-api-cn.mchost.guru/api/ide/v1/text_to_image?prompt=simple%20icon&image_size=square" alt="icon" class="img-top">
  top - 图片与文本顶部对齐
</p>

<p>
  <img src="https://trae-api-cn.mchost.guru/api/ide/v1/text_to_image?prompt=simple%20icon&image_size=square" alt="icon" class="img-bottom">
  bottom - 图片与文本底部对齐
</p>

<p>
  <img src="https://trae-api-cn.mchost.guru/api/ide/v1/text_to_image?prompt=simple%20icon&image_size=square" alt="icon" class="img-text-top">
  text-top - 图片与文本顶部对齐
</p>

<p>
  <img src="https://trae-api-cn.mchost.guru/api/ide/v1/text_to_image?prompt=simple%20icon&image_size=square" alt="icon" class="img-text-bottom">
  text-bottom - 图片与文本底部对齐
</p>

实用案例分析

案例 1: 图标与文本对齐

在网页设计中，经常需要将图标与文本垂直对齐：

.icon {
  display: inline-block;
  width: 20px;
  height: 20px;
  background-color: #333;
  border-radius: 4px;
  vertical-align: middle;
  margin-right: 8px;
}

.text {
  vertical-align: middle;
}

案例 2: 按钮中的图标与文本对齐

在按钮中，需要确保图标与文本垂直居中对齐：

.button {
  display: inline-block;
  padding: 8px 16px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.button-icon {
  display: inline-block;
  width: 16px;
  height: 16px;
  background-color: white;
  border-radius: 2px;
  vertical-align: middle;
  margin-right: 8px;
}

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

案例 3: 表格数据的垂直对齐

在表格中，需要根据内容类型选择合适的垂直对齐方式：

table {
  width: 100%;
  border-collapse: collapse;
}

th {
  background-color: #f5f5f5;
  font-weight: bold;
  text-align: left;
  vertical-align: bottom;
  padding: 12px;
  border: 1px solid #ccc;
}

td {
  padding: 12px;
  border: 1px solid #ccc;
  vertical-align: top;
}

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

ASCII 示意图

vertical-align 不同值的效果对比

+-------------+------------------------+------------------------+
| 值          | 效果                   | 适用场景               |
+-------------+------------------------+------------------------+
| baseline    | 基线对齐               | 默认对齐方式           |
| sub         | 下标对齐               | 数学公式、化学符号     |
| super       | 上标对齐               | 数学公式、脚注         |
| top         | 顶部对齐               | 需要顶部对齐的元素     |
| text-top    | 文本顶部对齐           | 与文本顶部对齐         |
| middle      | 垂直居中对齐           | 图标与文本对齐         |
| bottom      | 底部对齐               | 需要底部对齐的元素     |
| text-bottom | 文本底部对齐           | 与文本底部对齐         |
| <length>    | 相对于基线偏移         | 精确控制对齐位置       |
| <percentage>| 相对于行高偏移         | 基于行高的对齐         |
+-------------+------------------------+------------------------+

内联元素垂直对齐示意图

                   +------------------------+
                   |                        |
                   |  text-top              |
+---------+        |  +-----+               |
|         |        |  |     |               |
|  top    |--------+  |     |---------------+
|         |        |  |     |               |
+---------+        |  |     |               |
                   |  |     |               |
                   |  |     |               |
+---------+        |  |     |               |
|         |        |  |     |               |
| middle  |--------+--|     |--             |
|         |        |  |     |               |
+---------+        |  | img |               |
                   |  |     |               |
                   |  |     |               |
+---------+        |  |     |               |
|         |        |  |     |               |
| baseline|--------+--|     |---------------+
|         |        |  +-----+               |
+---------+        |  text-bottom           |
                   |                        |
+---------+        |                        |
|         |        |                        |
| bottom  |--------+------------------------+
|         |        |                        |
+---------+        +------------------------+

实践练习

练习 1: 实现图标与文本的垂直居中对齐

创建一个包含图标和文本的容器，使用 vertical-align 属性确保图标与文本垂直居中对齐。

练习 2: 实现按钮中的图标与文本对齐

创建一个按钮，包含图标和文本，使用 vertical-align 属性确保图标与文本在按钮中垂直居中对齐。

练习 3: 实现表格数据的垂直对齐

创建一个表格，包含不同类型的数据（文本、数字、图标），为不同类型的单元格设置合适的 vertical-align 值，确保数据显示整洁美观。

总结

vertical-align 属性是 CSS3 中控制内联元素、内联块元素和表格单元格垂直对齐方式的重要属性，通过设置不同的值，可以实现各种垂直对齐效果：

对于内联元素：可以控制元素相对于父元素文本的垂直对齐方式
对于表格单元格：可以控制单元格内容的垂直对齐方式

常用的 vertical-align 值及其应用场景：

baseline: 默认值，适用于大多数文本内容
middle: 适用于图标与文本的垂直居中对齐
top: 适用于需要顶部对齐的元素
bottom: 适用于需要底部对齐的元素
sub/super: 适用于下标和上标

合理使用 vertical-align 属性，可以使页面元素对齐更加精确，提升页面的整体美观度和可读性。需要注意的是，vertical-align 属性只适用于内联元素、内联块元素和表格单元格，对块级元素无效。