如何在CSS中垂直中心文本和图标-css教程-PHP中文网

How to Vertically Center Text and Icons in CSS

本文将介绍多种CSS水平和垂直居中方法，这些方法曾经很棘手，但现在很容易实现。我们将涵盖使用Flexbox和定位加转换的水平和垂直居中。另一篇文章中，我们还将介绍如何使用CSS Grid进行水平和垂直居中。

要点总结

使用Flexbox垂直居中文本和图标：将容器转换为Flex容器，并使用justify-content和align-items居中子元素。
组合position和transform可以实现垂直居中，尤其适用于高度可变的元素。这通过创建定位上下文并调整元素相对于其容器的位置来完成。
line-height属性可用于在固定高度容器内垂直居中单行文本或图标，而vertical-align可用于居中内联元素。

如何使用Flexbox进行水平和垂直居中

Flexbox可以水平和垂直对齐元素，从而在CSS中居中文本、图标或任何其他元素。

要使用Flexbox居中元素，可以使用以下代码片段：

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

登录后复制

此代码片段将.container转换为Flex容器，自动将其子元素转换为Flex项目。然后，可以使用justify-content水平居中这些Flex项目，使用align-items垂直居中。

查看示例：CodePen链接

继续阅读以了解盒子模型的垂直定位和定位技术。

如何使用position和transform实现灵活的垂直居中

当无法使用Flexbox或需要在容器内居中一个项目时，可以使用position将元素放置在其容器的中心。

相反，我们可以组合position和转换来垂直居中高度可变的元素。例如，要在视口整个高度内垂直居中元素，可以使用以下代码片段：

.container {
  position: relative;
  min-height: 100vh;
}
.vertical-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

登录后复制

我们首先通过在容器元素上设置position: relative来创建定位上下文。这将允许我们在其边界内定位.vertical-center元素。

接下来，我们将要居中元素的左上角放置在其容器的中心，方法是将其顶部边缘放置在其父元素顶部的50%处，将其左边缘放置在其父元素左边的50%处。

最后，通过将其向上平移其高度的50%和向左平移其宽度的50%，将元素调整回中心。现在，我们的元素在容器内垂直和水平居中。由于放置是使用相对于元素大小的百分比值完成的，因此如果容器或子元素的宽度或高度发生变化，元素将保持居中。

查看示例：CodePen链接

如何使用line-height在固定高度下进行垂直居中

要在其容器内垂直居中单行文本或图标，可以使用line-height属性。此属性控制文本运行中一行的高度，并在内联元素的线框上方和下方添加等量的空间。如果容器的高度已知，则设置相同值的line-height将垂直居中子元素。

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

登录后复制

如何使用vertical-align居中内联元素

vertical-align属性仅影响其显示设置为inline、inline-block或table-cell的元素。

它采用长度、百分比或关键字值。

长度和百分比将元素的基线与在其父元素基线上方给定距离处对齐。

关键字值可以是以下之一：

baseline
sub
super
text-top
text-bottom
middle
top
bottom

大多数这些都非常直观，但sub将基线与父元素的下标基线对齐，而super将元素的基线与父元素的上标基线对齐。

让我们在一个实际示例中看看vertical-align。

这里有一个图像和文本网格，它们都具有不同的高度，这意味着文本并非都整齐地对齐。

（此处应插入原文中的HTML代码，并进行相应的修改，使其更简洁易懂，并避免使用失效链接）

我们可以将网格容器设置为display: inline-block，并在图像上使用vertical-align: bottom，以使所有内容都整齐地排列。

如果这里没有文本，并且我们希望所有图像都垂直居中，我们可以使用vertical-align: middle并获得相当不错的效果。

有关更多居中方法，请务必查看如何使用CSS Grid进行水平和垂直居中。

关于如何在CSS中垂直居中文本和图标的常见问题解答

（此处对原文FAQ部分进行了精简，保留核心信息，并对部分答案进行了更清晰的表达。）

垂直对齐是什么？

CSS中的垂直对齐是一个属性，它控制元素沿垂直轴的位置。它是一个强大的工具，可以帮助您精确灵活地设计布局。它可以用于垂直居中元素，将它们与容器的顶部或底部对齐，或将它们均匀地分布在垂直空间中。CSS中的vertical-align属性通常与内联或内联块元素一起使用，但也可以与表格单元格一起使用。

如何使用CSS垂直居中文本？

可以使用display: flex和align-items: center垂直居中文本。

可以使用垂直对齐处理块级元素吗？

可以使用position: relative; top: 50%; transform: translateY(-50%);垂直对齐块级元素。

为什么我的垂直对齐不起作用？

原因可能包括父容器未指定高度，或试图使用vertical-align对齐块级元素。

如何垂直对齐图像？

可以使用与文本相同的方法。

可以使用垂直对齐处理CSS Grid吗？

可以使用align-items属性。

如何垂直对齐按钮中的文本？

可以使用line-height属性，其值应与按钮高度相同。