[CSS] 麻煩的文字、區塊水平垂直置中筆記

因為自己在設計網頁時都會忘記要怎麼做水平垂直置中,所以特別寫一篇來當筆記。這邊第一次嘗試用 CodePen 來讓訪客能同時比對程式碼和執行結果,是個不錯的東西。如果你也想要放到 WordPress 的話,可以試試 CodePen Embed Block 外掛。

文字水平垂直置中

首先來處理文字的部分,完整程式碼預覽放在這節最後。

水平置中

水平置中比較單純,直接在 <p> 或它上層的容器下 text-align: center; 就可以用了。

垂直置中

麻煩的就是垂直置中,CSS 有個屬性叫做 vertical-align: middle;,但是這只能用在 display: inlinedisplay: inline-block 的元素中,而且它會影響到前後的元素對齊。

參考 [30 道難解的 CSS 排版] 第 1 道:認識對齊 I 這篇文章,它的 vertical-align 是下在右邊那張圖上,但它影響的元素是左邊的文字。

圖片來源:iT邦幫忙

那我們要怎麼做才不會影響到別的元素?這時有個陌生卻很讚的東西出現了 — 偽元素。

偽元素有 before 和 after 可以用,它存在的位置是在容器中的最前或最後面。簡單來說就是你可以將 vertical-align 下在這邊,而且不會影響到這個容器外的元素。

編寫邏輯:

  1. 首先我們要在容器中下一個 vertical-align: top; 確保它是預設的向上對齊。
  2. 接下來在容器的 before 偽元素中指定一個寬為 0、高 100%、display: inline-block; 並給它 vertical-align: middle;,這樣它會存在於容器內最左邊,並影響所有右側的元素垂直對齊方式。
  3. 最後在容器內的 <p> 元素中下 display: inline-block;,讓它變成行內元素。

CodePen 預覽 (可以點右上角 Logo 來自己修改測試):

區塊水平垂直置中

區塊置中的部分,如果你有要做垂直置中的話就直接忽略水平置中的說明,直接跳到後面看。

水平置中 (外距)

如果是小區塊的話常用 padding 來做到置中,這應該不需要說明。而如果是要做為 RWD 的置中容器的話,用 margin: auto; 的方法會比較好。

編寫邏輯:

  1. 給容器一個寬和高。
  2. 再給它自動左右外距 margin: auto;,簡寫格式為 margin: 上下 左右;

水平置中 (Flex)

Flex 是比較新也比較強大的系統,只要在最外層給它 Flex 相關屬性就可以完全控制子層的長相,就不用去一直調整內外距。

編寫邏輯:

  1. 目標容器 (方框) 外必須有一個父容器。
  2. 在父容器中下 display: flex;,並給它 justify-content: center; 指定水平置中。
  3. 最後給目標容器一個合適的寬與高。

垂直置中 (定位)

區塊的垂直對齊一樣有兩種做法,我們先從定位法來說起。

編寫邏輯:

  1. 目標容器 (方框) 一樣需要一個父容器。
  2. 父容器必須有明確的高,寬要看用途,這邊直接用 100% 視圖高度來做。
  3. 接下來給目標容器一個明確的寬高。
  4. 切換成 position: absolute; 絕對定位。
  5. 設定左側與上方位移各 50%,這時你會發現容器整個偏一邊,因為我們沒把寬高算進去。
  6. translate(-50%, -50%); 來讓 XY 軸各位移 50% 容器的寬高回來,這行真的神,不需要自己去算數值。
  7. 最後你看到的就是垂直置中的容器。

如果你沒有要水平置中的話就將 left 拿掉、transform 的內容改成 translateY(-50%)

垂直置中 (Flex)

Flex 就簡單很多了,在父容器上操作就好。

編寫邏輯:

  1. 將父容器改成 display: flex;。
  2. 設定 justify-content: center; 水平對齊與 align-content: center; 垂直對齊,但現在它的垂直對齊沒作用。
  3. 所以要記得設定多行排版 flex-wrap: wrap;
  4. 完成。
0 留言
Inline Feedbacks
View all comments
[convertkit form=2362222]
0
對這邊的內容有什麼想法嗎?你可以在討論區留言喲!x
()
x