上一篇
html文字垂直
使用CSS
writing-mode: vertical-lr 属性可
line-height 与垂直对齐
| 方法 | 代码示例 | 效果说明 |
|---|---|---|
| 单行文本垂直居中 | <div style="line-height:100px;height:100px">文本</div> | 设置容器高度等于line-height值，使文本垂直居中 |
| 多行文本基线对齐 | <div style="line-height:1.5;height:300px">多行<br>文本</div> | line-height控制行间距，影响整体垂直分布 |
inline元素专用：vertical-align
| 属性值 | 适用场景 | 效果演示 |
|---|---|---|
| baseline | 图片与文字底部对齐<img style="vertical-align:baseline" src=""> | 图片底部与文字基线对齐 |
| middle | 表格单元格内容垂直居中<td style="vertical-align:middle">内容</td> | 仅对inline元素有效 |
| top/bottom | 按钮图标垂直排列<span style="vertical-align:top">↑</span> | 控制图标相对文字的位置 |
块级元素转换：display属性
| 显示类型 | 核心属性 | 实现原理 |
|---|---|---|
| inline-block | vertical-align:middle | 将div转换为inline元素后应用垂直对齐 |
| table-cell | display:table-cell;vertical-align:center | 模拟表格单元格的居中效果 |
| flex | align-items:center | 弹性布局下的垂直对齐控制 |
现代布局方案：Flex与Grid
| 布局类型 | 核心属性 | 适用场景 |
|---|---|---|
| Flex布局 | align-items:centerjustify-content:center | 单行/多行内容居中对齐 |
| Grid布局 | place-items:center | 二维布局中的精确定位 |
| 混合布局 | display:grid;align-content:center | 复杂网格系统的垂直分布 |
特殊场景处理
| 问题类型 | 解决方案 | 代码示例 |
|---|---|---|
| 图片字体基线对齐 | display:flex;align-items:center | 组合元素时的垂直居中 |
| 响应式高度适应 | line-height:normal;padding:0.5rem 1rem | 使用相对单位替代固定值 |
| 多行文本居中 | display:table;margin:auto | 表格化布局的自动适配 |
常见问题与解答
Q1：如何让单行文本在容器中垂直居中？
A1：使用line-height等于容器高度，或设置为display:flex;align-items:center，前者适用于固定高度场景，后者更适合响应式布局。
Q2：为什么设置vertical-align对block元素无效？
A2：该属性仅作用于inline/inline-block元素，对于div等block元素，需转换为display:inline-block或改用
