突破垂直居中惯例：利用基线与 vertical-align 玩转排版布局

2024-02-15 02:17:35

如今，网页设计中垂直居中的元素布局技术日益成熟，从基本的对齐方式到灵活的伪元素运用，都为设计师们提供了更多选择。而作为一项基础技术，垂直对齐方式往往被忽视，其与 vertical-align 属性的巧妙结合，却能带来令人惊艳的效果。本文将以深入浅出的方式，探索 vertical-align 属性与基线对齐方式在 vertical-align 属性中的应用，并提供多个示例和代码片段，希望能对网页设计师们有所启发。

基线与 vertical-align 属性

在深入了解之前，先来了解一些基本概念。在 CSS 布局中，基线是指行内元素（inline element）中最高的元素的底边线。当多个行内元素在一行中排列时，它们都会以其各自的基线为准，上下对齐。

vertical-align 属性可以用来控制行内元素的垂直对齐方式，它可以取以下几个值：

baseline： 元素的基线与父元素的基线对齐。
top： 元素的顶部与父元素的顶部对齐。
middle： 元素的中心与父元素的中心对齐。
bottom： 元素的底部与父元素的底部对齐。
sub： 元素的底部与父元素的基线对齐，向下偏移一个基线单位。
super： 元素的顶部与父元素的基线对齐，向上偏移一个基线单位。

基线对齐方式与 vertical-align 属性的应用

基线对齐方式是 vertical-align 属性的默认值，在这种对齐方式下，行内元素的基线会与父元素的基线对齐。这通常是网页设计中最常见的情况，因为大部分元素都是以基线对齐的方式排列的。

如果需要将行内元素的顶部、中心或底部与父元素的相应位置对齐，可以使用 vertical-align 属性的 top、middle 或 bottom 值。

例如，以下代码将使元素的顶部与父元素的顶部对齐：

.element {
  vertical-align: top;
}

以下代码将使元素的中心与父元素的中心对齐：

.element {
  vertical-align: middle;
}

以下代码将使元素的底部与父元素的底部对齐：

.element {
  vertical-align: bottom;
}

利用伪元素实现垂直居中

以上方法虽然可以实现元素的垂直对齐，但如果需要将元素垂直居中，就需要借助其他方法了。一种常用的方法是利用伪元素。

伪元素是指在 HTML 中不存在，但可以在 CSS 中创建的元素。伪元素有两种类型：::before 和 ::after 。::before 伪元素在元素的前面插入内容，而 ::after 伪元素在元素的后面插入内容。

我们可以利用 ::before 和 ::after 伪元素来创建一个小盒子，并使这个盒子与元素重叠，然后使用 vertical-align 属性将元素居中对齐到这个盒子上，就可以实现元素的垂直居中。

以下代码演示了如何使用伪元素实现元素的垂直居中：

.element {
  position: relative;
  display: inline-block;
}

.element::before,
.element::after {
  position: absolute;
  content: "";
  top: 0;
  bottom: 0;
}

.element::before {
  left: 0;
  right: 50%;
  margin-right: -50%;
}

.element::after {
  left: 50%;
  right: 0;
  margin-left: -50%;
}