flexbox垂直居中_如何使用Flexbox创建完美居中的文本

最新推荐文章于 2023-12-17 17:41:20 发布

翻译最新推荐文章于 2023-12-17 17:41:20 发布 · 402 阅读

文章标签：

#css #python #html #java #面试

本文介绍了如何使用Flexbox在水平和垂直方向上轻松居中内容。通过在CodePen上的项目演示，展示了传统方法的局限性和Flexbox的优越性。学习如何通过简单的CSS规则实现文本和可变高度内容的完美居中。

flexbox垂直居中

将内容水平居中并没有什么特别令人印象深刻的内容。你已经做了很多年了。但是，如何将可变高度内容垂直居中？在我的课程“ 面向Web设计人员的6个Flexbox项目”中的这段视频中，您将学习Flexbox如何以最小的努力解决此问题。

如何使用Flexbox创建完美居中的内容

在CodePen中介绍项目

在本教程中，我将向您展示使用Flexbox模型在水平和垂直方向上将要居中的任何内容居中多么容易。

首先转到CodePen上该项目的启动笔，然后单击Fork打开新副本。我们将对此新副本进行更改。

首先让我们看一下HTML。

因此，我们在这里得到的是一个横幅，并且所有这些都包含在带有banner类的div中。在里面，我们还有另一个带有banner-text类的div。然后，我们有一个h1 ， h3和h6元素，其中包含我们所有的文本。因此，所有这三个文本元素都包含在具有banner-text类的div中。

然后在我们CSS中，设置横幅。

如果我们跳到banner类，则将文本颜色设置为白色。我们已经创建了背景图片。我们已经定位好了它，并调整了大小，并将其高度设置为300像素。并且我们对横幅内的三个文本元素h1 ， h3和h6应用了一些样式。

我们将边距设置为零，以便它们彼此相邻并保持良好贴合，并且在该文本后面设置了文本阴影。然后，您还可以查看其他规则。

居中文本的旧方法

在这一点上，我想向您展示的是我过去垂直和水平对齐文本的方式。

水平对齐文本非常容易。因此，我们可以在横幅内进入三个标题h1，h3和h6的规则，只需将text-align设置为center 。

困难的部分是使文本垂直居中。

如果只有一行文本，则可以通过将行高设置为与容器相同的高度来轻松地垂直居中。因此，我们的容器就是横幅本身，高度为300像素，因此，如果只有一行文本，则可以将行高设置为300像素，并且该文本将垂直居中。

但是，如果您有多行文本怎么办？如果您有一段文字怎么办？如果文本和图像混合在一起，并且希望整个内容块垂直居中怎么办？

好吧，我过去的做法只是盯着它看。因此，我将为.banner-text创建一个新规则并进行一些处理，将顶部填充增加到各种不同的值，直到看起来正确为止。

但是老式的方法并不总是可靠的，因为如果有人将您的文本大小覆盖到不再居中的程度怎么办？您无法以这种方式完全控制它。

使用Flexbox居中文字

与传统方式相比，Flexbox使我们能够更轻松，更准确地使文本垂直居中。

当使用Flexbox模型时， banner-text类甚至不需要规则。我们需要做的就是处理flex容器，这将是我们的banner类。

banner类表示作为该文本父级的div。因此，在banner类的规则内，我们将display设置为flex 。

然后在banner规则中，在display: flex之后display: flex ，让我们做更多的事情。让我们添加justify-content: center ，这就是我们将所有内容水平居中的方式。

然后，我们需要做的最后一件事是弄清楚如何垂直放置居中位置。

因此，我们可以使用justify-content沿主轴对齐项目。但是我们可以使用另一个名为align-items属性沿十字轴align-items 。

如果我们以flex-start开头，则文本将显示在顶部。如果我们将其更改为flex-end ，它将位于底部。我们还可以访问相同的center值，该值将使文本垂直居中。

因此，此align-items属性与justify-content属性完全相同，但是它沿横轴而不是主轴。当我们使用display: flex创建一个flex容器时，默认情况下，它被设置为行而不是列，因此我们的主轴是水平轴。因此， justify-content将沿着我们的水平轴，而align-items属性沿着交叉轴（在本例中为垂直轴）移动。

最终的样子如下：

您可以在CodePen上找到完成效果的所有代码。

观看完整课程

CSS Flexbox模型开始得到更广泛的使用，现在在所有主要的浏览器中都受支持。在整个课程中，有6个Web设计器的Flexbox项目，我们将以我以前的CSS：Flexbox Essentials课程为基础，并概述六个日常使用的实用CSS项目。

我们还构建了全面的指南，可以帮助您在线学习CSS，无论您是刚刚开始使用基础知识还是想探索更高级CSS。查阅学习CSS：完整指南。

翻译自: https://webdesign.tutsplus.com/tutorials/how-to-create-perfectly-centered-text-with-flexbox--cms-27989

flexbox垂直居中