CSS 垂直对齐

2025年3月26日 | 阅读 10 分钟

在 CSS 中，vertical-align 属性控制行内级别元素或表格单元格在其包含元素内的垂直对齐方式。它适用于作为文本行的一部分的元素，或者显示为 inline-block 或 table-cell 的元素。

"vertical-align" 属性通常用于行内元素，如图像、文本或行内块级元素。它不直接应用于块级元素；然而，你可以使用 flexbox 或定位等技术来垂直对齐它们。

语法

这是 vertical-align 属性的基本语法

selector {
  vertical-align: value;
}

“值”可以是以下选项之一：

基线 (Baseline): 将元素的基线与其父元素的基线对齐。这是大多数元素的默认值。
下标 (Sub): 将元素的基线与父元素字体的下标基线对齐。
上标 (Super): 将元素的基线与父元素字体的上标基线对齐。
顶部 (Top): 将元素的顶部与行框内该行的最高元素的顶部对齐。
文本顶部 (Text-top): 将元素的顶部与父元素字体的顶部对齐。
居中 (Middle): 相对于父元素，将元素垂直居中。
底部 (Bottom): 将元素的底部与行框内该行的最低元素的底部对齐。
文本底部 (Text-bottom): 将元素的底部与父元素字体的底部对齐。
百分比 (Percentage): 元素将以指定的行高百分比进行垂直对齐。例如，vertical-align: 50% 将在父元素内垂直居中该元素。

注意：请记住，“vertical-align” 的特定行为取决于元素的类型和使用它的上下文，因此其效果可能并非总是直接。它尤其适用于将行内元素与文本或其他行内元素对齐。

示例

以下是关于 CSS "vertical-align" 属性的一些更多详细信息和示例：

1. 基线对齐

vertical-align: baseline 值将元素的基线与其父元素的基线对齐。这是大多数行内级别元素的默认行为。

<p style="font-size: 24px;">
  <span style="vertical-align: baseline;"> Baseline </span>
  <span> Other Text </span>
</p>

2. 下标和上标

vertical-align: sub 值将元素的基线与父元素字体的下标基线对齐，使其看起来像下标。另一方面，
vertical-align: super 将元素的基线与父元素字体的上标基线对齐。

<p>
  H <sub style="vertical-align: sub;"> 2 </sub> O is water.
  x<sup style="vertical-align: super;"> 2 </sup> + y <sup style="vertical-align: super;"> 2 </sup> = r <sup style="vertical-align: super;"> 2 </sup>
</p>

3. 顶部和底部对齐

vertical-align: top 值将元素的顶部与行框内该行的最高元素的顶部对齐。类似地，
vertical-align: bottom 将元素的底部与行框内该行的最低元素的底部对齐。

<p>
  <span style="vertical-align: top;"> Top-aligned </span>
  <span style="vertical-align: bottom;"> Bottom-aligned </span>
</p>

4. 居中对齐

vertical-align: middle 值相对于父元素将元素垂直居中。这通常用于在文本中居中图标或图像。

<p style="font-size: 24px;">
  <span style="vertical-align: middle;"> This icon is vertically centered </span>
  <img src="icon.png" alt="Icon" style="vertical-align: middle;">
</p>

5. 文本顶部和文本底部对齐

vertical-align: text-top 值将元素的顶部与父元素字体的顶部对齐，而
vertical-align: text-bottom 值将元素的底部与父元素字体的底部对齐。

<p style="font-size: 36px;">
  <span style="vertical-align: text-top;"> Text-top aligned </span>
  <span style="vertical-align: text-bottom;"> Text-bottom aligned </span>
</p>

6. 百分比对齐

使用百分比值与 vertical alignment 可以让你以特定的行高百分比进行元素的垂直对齐。例如，vertical-align: 50% 将在行高的一半处居中元素。

<p style="font-size: 24px; line-height: 40px;">
  <span style="vertical-align: 50%;"> Centered Vertically </span>
</p>

7. 块级元素的垂直居中

要将块级元素在其父容器内垂直居中，可以使用 flexbox 或 grid 布局。

Flexbox example:
html
<div class="parent">
  <div class="child">Vertically Centered</div>
</div>
css
.parent {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px; /* Set the desired container height */
}

8. 高度未知的元素的垂直居中

如果你不知道要垂直居中的元素的高度，可以使用 position 和 transform 的组合。

html
<div class="parent">
  <div class="child">Vertically Centered (Unknown Height)</div>
</div>
CSS
.parent {
  position: relative;
  height: 200px; /* Set the desired container height */
}
.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

9. 多行文本的垂直居中

要将多行文本在其容器内垂直居中，可以使用 flexbox 和伪元素 (pseudo-element) 的组合。

html
<div class="parent">
  <div class="child">Multi-line<br>Vertically Centered Text</div>
</div>
CSS
.parent {
  display: flex;
  align-items: center;
  height: 200px; /* Set the desired container height */
}
.child {
  flex: 1;
  text-align: center;
}
.child::before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  height: 100%;
}

10. 不同宽高比容器中图像的垂直居中

如果你有各种宽高比的图像需要在容器内居中，可以使用 flexbox 和 object-fit 的组合。

HTML

<div class="parent">
  <img src="image1.jpg" alt="Image 1">
  <img src="image2.jpg" alt="Image 2">
</div>

CSS

.parent {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 200px; /* Set the desired container height */
}
img {
  object-fit: contain;
  max-height: 100%;
}

11. 结合 vertical align 和 line height

你可以将 vertical-align 属性与 line-height 属性结合使用，以实现更精确的垂直对齐，尤其是对于较大的字体大小。

.element {
  font-size: 24px;
  line-height: 1.5;
  vertical-align: middle;
}

12. 使用 display 属性进行对齐

虽然 vertical alignment 主要用于行内级别元素，但你可以更改 display 属性以在特定上下文中实现块级元素的垂直对齐。

.container {
  display: table-cell;
  vertical-align: middle;
}

13. 表格中的垂直对齐

vertical-align 属性通常用于表格单元格 (

) 中，以控制单元格内内容的对齐方式。

td {
  vertical-align: middle;
}

14. 行内块级元素对齐

你可以使用 vertical alignment 将行内块级元素与文本行对齐，例如，文本旁边的图标。

<span class="icon">⭐</span> Star Rating
.icon {
  vertical-align: middle;
  font-size: 24px;
}

这些只是在不同场景下处理垂直对齐的一些示例。根据你的具体布局和需求，你可能需要调整或组合这些技术来实现所需的结果。CSS 提供了各种工具来有效地处理各种上下文中的垂直对齐。

请记住，虽然 vertical-align 属性有其用途，但对于所有对齐场景，尤其是块级元素，存在更全面的解决方案。对于更复杂的布局和对齐要求，建议探索现代 CSS 布局技术，如 Flexbox、CSS Grid，甚至 CSS 定位值（如 absolute 和 relative），以更有效和可预测地实现所需结果。

记住，“vertical-align” 只影响行内级别元素或表格单元格。使用 flexbox、grid 布局或定位等技术来垂直对齐块级元素。

示例

<!DOCTYPE html>  
<html>  
<head>  
<style>
div{
font-size: 20px;
border: 2px solid red;
}
img{
width:150px;
height: 100px;
}
img.top {
 vertical-align: text-top; 
 }
img.bottom { 
vertical-align: text-bottom; 
}
img.middle { 
vertical-align: middle; 
}
</style>
</head>  
<body>  
<div>An <img src="tiger.png" /> image with a default alignment.</div>
<div>An <img class="bottom" src="tiger.png" /> image with a text-bottom alignment.</div>

<div>An <img class="middle" src="tiger.png" /> image with a middle alignment.</div>

<div>An <img class="top" src="tiger.png" /> image with a text-top alignment.</div>
</body>  
</html>

输出