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 (Traditional) (中文(繁體)) translation by tianyiliang (you can also view the original English article)

讓內容水準居中沒有什麼特別的,我們從來都是這麼做的。  但有沒有想過讓高度不固定的內容垂直居中呢?  在我的視頻課程《Web 設計人員的 6 個 Flexbox 專案》中,您將學習如何利用 Flexbox 輕鬆解決這一問題。

如何用 Flexbox 讓內容完美居中

 一起看一下在 CodePen 上的這個項目

在本教程中,我將向你展示使用 Flexbox 模型,讓任意內容水準和垂直居中是多麼的簡單。

在 CodePen 上,進入這個項目的起始頁,然後點擊 Fork 來打開一個新的副本。  我們會在這個新的副本上進行修改。 首先讓我們來看看 HTML 部分。

首先讓我們來看看 HTML 部分。

Flexbox starting HTML

這裡是一個頭圖橫幅,它所有的東西都包含在一個叫 banner 的類裡面。  這個類裡包含了另一個 div ,它的類是 banner-text 。 然後裡面有 h1h3h6 三個元素,包含所有文字內容。  因此,這三個文本元素全都包含在一個類叫 banner-text 的 div 裡面。

然後是 CSS 部分,我們定義了這個橫幅的樣式。

Starting CSS

如果我們跳到 banner 這個類看看,文本顏色被設置為白色。  我們設定了一個背景圖。  定義了它的位置和大小,並將其高度設置為 300 圖元。  我們對這個橫幅裡的三個文本元素,也就是 h1h2和 h6,都設定了一些樣式。

我們將邊距設置為零,因此它們緊挨在一起,文本也設定了陰影。 還有其他的一些規則這裡就不詳細說了。

文本居中的老辦法

在這裡我要演示的是我們以前是如何在垂直和水準方向上進行文本對齊的。

水準對齊文本是很容易做到的。  我們可以直接去設置橫幅裡的三個標題、 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-items 屬性則是沿著交叉軸,在這種情況下,也就是垂直的軸。

最終效果如下︰

你可以在 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.