CSS中的vertical-align属性怎么使用

# CSS中的vertical-align属性怎么使用

`vertical-align`是CSS中用于控制**行内元素**或**表格单元格**垂直对齐方式的重要属性。它不适用于块级元素，理解其工作原理能有效解决常见的垂直对齐问题。

## 一、基本语法

```css
selector {
  vertical-align: baseline | top | middle | bottom | text-top | text-bottom | sub | super | length | percentage;
}

二、常见属性值

三、典型应用场景

1. 图片与文字对齐

img {
  vertical-align: middle; /* 解决图片底部间隙问题 */
}

2. 表格单元格内容垂直居中

td {
  vertical-align: middle;
}

3. 图标与文本混合排版

.icon {
  vertical-align: text-top;
  width: 16px;
  height: 16px;
}

四、注意事项

1. 仅适用于行内元素：对display: block无效，常见生效元素：

   • 行内元素：span, img, strong等
   • 表格单元格：td, th
   • display: inline-block元素

2. 基线对齐差异：不同字体的基线位置可能不同，可能导致意料之外的对齐效果

3. 与line-height的关系：百分比值基于当前元素的line-height计算

五、实际案例

<style>
  .container {
    line-height: 40px;
    border: 1px solid #ccc;
  }
  .box {
    display: inline-block;
    width: 50px;
    height: 50px;
    background: lightblue;
    vertical-align: middle;
  }
</style>

<div class="container">
  <span>文本内容</span>
  <div class="box"></div>
</div>

通过合理使用vertical-align，可以轻松实现精确的垂直对齐效果，特别是在构建导航菜单、表单控件等需要精细对齐的场景中非常实用。 “`