一、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 布局。
|