CSS属性vertical-align如何使用_内联元素对齐技巧

vertical-align用于内联或表格单元格元素的垂直对齐，常用值包括baseline、top、middle、bottom等；通过设置img{vertical-align:middle}可实现图文居中，inline-block元素可通过vertical-align统一对齐方式，table-cell元素可利用该属性实现内容垂直居中。

vertical-align 是CSS中控制内联元素或表格单元格内容垂直对齐方式的重要属性。很多人在使用它时会感到困惑，主要是因为它只对内联元素、inline-block元素以及表格单元格（table-cell）生效，而对块级元素无效。下面详细介绍它的常见用法和实用技巧。

1. vertical-align 的常用取值

• baseline：默认值，对齐元素的基线与父元素的基线对齐。
• top：元素的顶部与行中最高元素的顶部对齐。
• middle：元素的中部与父元素的基线加上小写字母x的高度的一半对齐。
• bottom：元素的底部与行中最低元素的底部对齐。
• text-top：元素顶部与父元素字体的顶部对齐。
• text-bottom：元素底部与父元素字体的底部对齐。
• 百分比 / 长度值：如 20% 或 5px，相对于 line-height 进行偏移。

2. 图片与文字垂直居中对齐

例如：

<span>文字<img src="icon.png" alt=""></span>

img {
  vertical-align: middle;
}

3. inline-block 元素之间的对齐问题

解决方法：

巧文书

巧文书是一款AI写标书、AI写方案的产品。通过自研的先进AI大模型，精准解析招标文件，智能生成投标内容。

61

查看详情

• 统一设置 vertical-align: top，使所有 inline-block 元素顶部对齐。
• 或使用 vertical-align: middle 实现居中对齐。
• 也可将父容器的 font-size: 0 来消除空白字符影响，再单独设置子元素字体大小。

4. 表格单元格中的垂直对齐

.cell {
  display: table-cell;
  vertical-align: middle;
  height: 100px;
}

基本上就这些。掌握 vertical-align 的关键是理解它作用于行内格式化上下文，不是用来布局整个块的。合理使用 middle、top 等值，能有效解决图标、文本、按钮等内联元素的对齐问题。不复杂但容易忽略细节。

以上就是CSS属性vertical-align如何使用_内联元素对齐技巧的详细内容，更多请关注php中文网其它相关文章！