一、vertical-align 的作用与适用元素
1. 作用
vertical-align 用于控制 行内元素（inline） 或 表格单元格（table-cell） 的 垂直对齐方式。
不适用于块级元素（除非通过 display 转换为行内块或表格元素）。
2. 适用元素
- 行内元素：<span>、<img>、<input>、<button> 等。
- 表格单元格：<td>、<th>。
- 行内块元素：display: inline-block 的元素。
二、vertical-align 的属性值
1. 关键字值
| 值 | 描述 |
|---|---|
| baseline | 默认值，元素基线与父元素基线对齐 |
| top | 元素顶部与行框顶部对齐 |
| middle | 元素中线与父元素基线加半 x-height 对齐（近似垂直居中） |
| bottom | 元素底部与行框底部对齐 |
| text-top | 元素顶部与父元素文本顶部对齐 |
| text-bottom | 元素底部与父元素文本底部对齐 |
2. 长度值与百分比
- 长度值：如 vertical-align: 10px，元素相对于基线向上或向下偏移。
- 百分比：基于元素的 line-height 计算偏移量，如 vertical-align: 50%。
三、核心使用场景
1. 行内元素与文本对齐
|
1 2 |
<span class="icon">▲</span> <span class="text">Top</span> |
|
1 2 3 |
.icon { vertical-align: middle; /* 图标与文本垂直居中 */ } |
2. 图片与文字对齐
|
1 |
<img src="logo.png" class="logo"> CSS Logo |
|
1 2 3 |
.logo { vertical-align: middle; /* 图片与文字垂直居中 */ } |
3. 表格单元格内容对齐
|
1 2 3 4 5 |
<table> <tr> <td class="cell">Content</td> </tr> </table> |
|
1 2 3 |
.cell { vertical-align: middle; /* 单元格内容垂直居中 */ } |
四、常见问题与解决方案
1. 图片底部间隙问题
- 现象：<img> 下方出现空隙。
- 原因：图片默认对齐到基线（baseline），与父元素基线下的预留空间产生间隙。
- 解决：
|
1 2 3 4 |
img { vertical-align: bottom; /* 或 middle/top */ /* 或 display: block; */ } |
2. vertical-align 对块级元素无效
- 现象：设置 vertical-align: middle 的 <div> 未垂直居中。
- 原因：块级元素默认 display: block，不支持 vertical-align。
- 解决：
|
1 2 3 4 |
.block { display: inline-block; /* 或 table-cell */ vertical-align: middle; } |
3. 多行元素对齐混乱
- 现象：多行文本或元素垂直对齐不一致。
- 解决：统一设置 vertical-align 或调整 line-height。
|
1 2 3 4 5 6 |
.container { line-height: 1.5; /* 确保行高一致 */ } .item { vertical-align: middle; } |
五、与其他属性的协作
1. 与 line-height 配合
line-height 控制行高，影响 vertical-align 的基线位置。
示例：单行文本垂直居中：
|
1 2 3 4 |
.button { height: 40px; line-height: 40px; /* 行高 = 容器高度 */ } |
2. 与 display: table-cell 配合
实现块级元素的垂直居中：
|
1 2 3 4 |
.parent { display: table-cell; vertical-align: middle; /* 垂直居中 */ } |
六、总结
| 关键点 | 说明 |
|---|---|
| 适用元素 | 行内元素、行内块元素、表格单元格 |
| 默认值 | baseline（基线对齐） |
| 常见用途 | 图片与文字对齐、表格内容垂直居中、行内元素对齐 |
| 典型问题 | 图片底部间隙、块级元素无效、多行对齐混乱 |
| 协作属性 | line-height、display |
line-height详解
一、line-height 的核心作用
line-height 用于控制 行框（line box）的高度，直接影响以下布局效果：
- 文本垂直居中：单行文字在容器内垂直居中。
- 行间距调整：多行文字之间的间距（行高）。
- 布局计算：参与元素高度计算，影响 height 和 vertical-align 的行为。
二、line-height 的语法与单位
line-height 支持多种单位或数值形式：
| 类型 | 示例 | 计算方式 | 推荐场景 |
|---|---|---|---|
| 无单位数值 | line-height: 1.5 | 基于当前元素的 font-size 计算（1.5 * font-size） | 通用（继承友好） |
| 百分比 | line-height: 150% | 基于当前元素的 font-size 计算（1.5 * font-size） | 特定比例需求 |
| 长度单位 | line-height: 24px | 直接指定固定值（24px） | 精确控制行高 |
| 全局关键字 | line-height: normal | 浏览器默认值（通常约 1.2，取决于字体和浏览器） | 重置自定义行高 |
单位对比示例
|
1 2 3 4 5 6 7 8 |
.parent { font-size: 16px; line-height: 1.5; /* 子元素继承 1.5，计算为 1.5 * 子元素自身的 font-size */ } .parent-percent { font-size: 16px; line-height: 150%; /* 子元素继承计算后的 24px（1.5 * 16px） */ } |
三、line-height 的继承规则
- 无单位数值：子元素继承数值，最终行高基于子元素的 font-size。
- 百分比/长度单位：子元素继承计算后的像素值，与父元素的 font-size 绑定。
继承差异示例
|
1 2 3 |
<div class="parent"> <div class="child">Text</div> </div> |
|
1 2 3 4 5 6 7 |
.parent { font-size: 16px; line-height: 1.5; /* 继承的是 1.5 */ } .child { font-size: 24px; /* 实际行高：1.5 * 24px = 36px */ } |
|
1 2 3 4 5 6 7 |
.parent-percent { font-size: 16px; line-height: 150%; /* 计算为 24px */ } .child-percent { font-size: 24px; /* 实际行高：24px（继承父元素计算后的值） */ } |
什么情况下 line-height 能实现垂直居中？
line-height 仅在以下场景有效：
- 单行文本：元素内只有一行文本（无换行）。
- 行内内容：子元素是 inline 或 inline-block 元素。
- 容器高度等于行高：容器高度与 line-height 值相同。
正确示例：单行文本居中
|
1 2 3 4 5 6 7 |
<div class="text">单行文本</div> <style> .text { height: 100px; line-height: 100px; /* 有效：文本垂直居中 */ } </style> |
四、解决方案：让多行内容垂直居中
方法 1：Flex 布局（推荐）
|
1 2 3 4 5 6 |
.goods .bd .text { height: 100px; display: flex; flex-direction: column; justify-content: center; /* 垂直居中 */ } |
方法 2：转换为行内块元素
|
1 2 3 4 5 6 7 8 9 10 |
.goods .bd .text { height: 100px; line-height: 100px; /* 父容器行高 */ } .goods .bd .text h4, .goods .bd .text p { display: inline-block; /* 转为行内块 */ vertical-align: middle; /* 垂直对齐 */ line-height: normal; /* 重置行高 */ } |
方法 3：调整子元素行高
|
1 2 3 4 5 6 7 |
.goods .bd .text { height: 100px; } .goods .bd .text h4, .goods .bd .text p { line-height: 50px; /* 总高度 100px / 2 行 = 50px */ } |
五、line-height 的实际应用
1. 单行文本垂直居中
通过设置容器高度等于 line-height 实现居中：
|
1 2 3 4 |
.button { height: 40px; line-height: 40px; /* 文本垂直居中 */ } |
2. 多行文本行间距控制
|
1 2 3 |
.article { line-height: 1.6; /* 增加行间距提升可读性 */ } |
3. 与 vertical-align 配合使用
调整行内元素（如图标、文字）的垂直对齐：
|
1 2 3 |
.icon { vertical-align: middle; /* 基于行高居中 */ } |
4. 重置浏览器默认行高
|
1 2 3 |
body { line-height: 1.5; /* 覆盖浏览器默认值（通常 1.2） */ } |
六、常见问题与解决方案
1. 行高计算不符合预期
- 原因：使用百分比或长度单位导致继承值固定。
- 解决：优先使用 无单位数值（如 1.5）。
2. 行内元素对齐偏差
- 原因：vertical-align 的基准是行高，未正确设置。
- 解决：统一行高或调整 vertical-align 值。
3. 行高影响布局高度
- 原因：行高大于 font-size 时，元素高度由行高决定。
- 解决：显式设置容器高度或使用 flex 布局。
