深入理解 CSS 中 vertical-align 属性

vertical-align 属性控制内联元素的垂直对齐方式。然而，它并不是万能的，因为它只能应用于内联元素和表格单元格。

属性值

vertical-align 属性可接受以下值：

• baseline：默认设置，元素的基线对齐父元素的基线；
• top：将元素的顶部对齐父元素的顶部；
• middle：将元素的中间对齐父元素中间；
• bottom：将元素的底部对齐父元素的底部；
• text-top：将元素的顶部对齐文本行的顶部；
• text-bottom：将元素的底部对齐文本行的底部；
• <percentage>：相对于 line-height 属性值计算，如 50% 表示当前元素被上下放置在行框的中心；
• <length>：如 10px，数值表示元素相对于基线的偏移量；
• sub：设置元素下标对齐；
• super：设置元素上标对齐。

示例：

示例一：

<div class="wrapper">
  <img src="example.png" alt="example" />
  <span>Hello World!</span>
</div>

.wrapper {
  border: 1px solid black;
  text-align: center;
}

img {
  vertical-align: middle;
}

在此示例中，有一个包含图像和文本的 div 容器。vertical-align: middle; 用于图像，使其垂直居中。

示例二：

<div class="wrapper">
  <span class="top">Top</span>
  <span class="bottom">Bottom</span>
</div>

.wrapper {
  border: 1px solid black;
  height: 100px;
  display: table-cell;
  vertical-align: middle;
}

.top {
  font-size: 24px;
  vertical-align: top;
}

.bottom {
  font-size: 12px;
  vertical-align: bottom;
}

在此示例中，有一个 div 容器，其中包含两个 span 元素。容器本身设为 display: table-cell;，vertical-align: middle;，使整个容器垂直居中。两个 span 元素分别使用 vertical-align: top; 和 vertical-align: bottom;，分别将它们的顶部和底部对齐容器的顶部和底部。

结论

虽然 vertical-align 属性可用于控制内联元素和表格单元格的垂直对齐方式，但它的应用也存在一定的局限性。在实际开发中，我们还需要根据情况综合考虑其他 CSS 属性，如 height、line-height 等，来控制元素的垂直对齐方式。