30-50% off hundreds of digital assets! WordPress themes, video, music and more 30-50% Off Go to Sale
Advertisement
  1. Web Design
  2. CSS
Webdesign

如何使用 Flexbox 完美实现文字的中心对齐

by
Difficulty:IntermediateLength:ShortLanguages:

Chinese (Simplified) (中文(简体)) translation by Saber Zou (you can also view the original English article)

让内容水平居中没有什么特别的,我们从来都是这么做的。 但有没有想过让高度不固定的内容垂直居中呢? 在我的视频课程《Web 设计人员的 6 个 Flexbox 项目》中,您将学习如何利用 Flexbox 轻松解决这一问题。

如何用 Flexbox 让内容完美居中

一起看一下在 CodePen 上的这个项目

在本教程中,我将向你展示使用 Flexbox 模型,让任意内容水平和垂直居中是多么的简单。

在 CodePen 上,进入这个项目的起始页,然后点击 Fork 来打开一个新的副本。 我们会在这个新的副本上进行修改。

首先让我们来看看 HTML 部分。

Flexbox starting HTML

这里是一个头图横幅,它所有的东西都包含在一个叫 banner 的类里面。 这个类里包含了另一个 div ,它的类是 banner-text 。 然后里面有 h1、 h3 和 h6 三个元素,包含所有文字内容。 因此,这三个文本元素全都包含在一个类叫 banner-text 的 div 里面。

然后是 CSS 部分,我们定义了这个横幅的样式。

Starting CSS

如果我们跳到 banner 这个类看看,文本颜色被设置为白色。 我们设定了一个背景图, 定义了它的位置和大小,并将其高度设置为 300 像素。 我们对这个横幅里的三个文本元素,也就是 h1h2h6,都设定了一些样式。

我们将边距设置为零,因此它们紧挨在一起,文本也设定了阴影。 还有其他的一些规则这里就不详细说了。

文本居中的老办法

在这里我要演示的是我们以前是如何在垂直和水平方向上进行文本对齐的。

水平对齐文本是很容易做到的。 我们可以直接去设置横幅里的三个标题、 h1、 h3 和 h6,把 text-algin 设置为 center

难的是垂直居中我们的文本。

如果只是有一行文本,通过把行高设定成它容器(container)高度相同的数值,就可以轻松实现垂直居中。 也就是说如果容器(container)就是横幅本身,高为300 像素,我们只有一行文本,那么我们可以将行高(line height)设置为 300 像素,文本就是垂直居中的。

但如果有几行文本呢? 或者是一段文字呢? 又或者是文本和图像混排,想要整块的内容垂直居中呢?

我以前的做法就是用肉眼去判断。 我会为 .banner-text 设定一个新的规则,不断地增加的顶部边距 (padding),尝试各种不同的值,直到它看上去差不多为止。

但是这个传统的方法并不靠谱,要是有人更改了文字的大小以至于它不再居中了呢? 这种方式你没有完全的控制权。

用 Flexbox 使文本居中

比起传统方法,Flexbox 让垂直居中文本变得容易得多,也更精确。

当使用 Flexbox 模型时,我们甚至不需要为 banner-text 这个类设定规则。 我们需要做的就是去处理 flex container,也就是我们的 banner 类。

这个 banner 类代表该文本的父级 div。 所以在这个 banner 类的属性里,我们将 display 设置为 flex

然后在 banner 属性里,在 display:flex 后面,我们还要定义一些东西。 加上 justify-content: center,这个可以使所有东西水平居中。

最后我们需要做的就是设法把元素垂直居中。

我们可以用 justify-content 把东西沿主轴对齐, 但我们也可以使用另一个属性 align-items 把东西沿着交叉轴对齐。

如果把文本设为 flex-start ,那么它将显示在顶部。 如果改成 flex-end,它就会在底部。 我们也可以设为 center ,这样就可以让文本垂直居中。

所以这个 align-items 属性 justify-content 属性本质上是一样的,但前者是沿交叉轴而不是主轴。 当我们用 display: flex 创建 flex 容器时,默认情况下它被设置为一行而不是一列,所以主轴是水平轴。 因此 justify-content 是沿着水平轴,而 align-item 属性则是沿着交叉轴,在这种情况下,也就是垂直的轴。

最终效果如下︰

你可以在 CodePen 上找到最终效果的所有代码。

观看全部课程

CSS Flexbox 模型开始被更广泛使用,所有主要浏览器也支持 flexbox 。 在完整课程《面向网页设计师的 6 个 Flexbox 项目》中,我们将基于我早期的课程 《CSS: Flexbox 要点》,列出了六个日常使用的 CSS 实践项目。

我们还建立了一个全面的指引,帮助你在线学习 CSS,不管你是刚刚开始学习基本知识,还是想要探索更高级的 CSS 技巧。 立即查看《学习 CSS︰ 完整指南》。

Envato qr branded
关注我们的公众号
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.