iT邦幫忙

DAY 1
8

30 道難解的 CSS 排版系列 第 1

[30 道難解的 CSS 排版] 第 1 道:認識對齊 I

本文同步刊載於 MUKI space 部落格:[30 道難解的 CSS 排版] 第 1 道:認識對齊 I

前言

我一直很想寫這系列的文章,一來是 CSS 博大精深,有太多難解的觀念在裡頭。二來是常常要切很多重複卻又複雜的版型,所以想要系統化這些資訊,供日後快速查閱。

因此,這系列算是我自己的筆記,也算是經驗分享吧!也希望能幫到各位 m(_ _)m

廢話不多說,直接上重點 XD。


對齊語法有哪些

對齊有兩種,一種是水平對齊,一種是垂直對齊。

在 CSS 的世界裡,比較直覺的對齊語法有text-align以及vertical-align。前者通常用來對齊文字,後者不熟練的人通常用了會失效(炸)。

當然,除了這兩種之外,CSS 還有其他語法也可以拿來對齊,例如:

  • margin
  • padding
  • position
  • line-height
  • display (grid, flex)
  • transform

以上這些語法,都可以幫助我們對齊,但首先,需要瞭解設計稿要的是哪種對齊?再針對之使用對應的語法,才可以一擊必殺,正確且迅速的做好版面。

可以讓元件水平置中的 text-align

text-align雖然直譯為文字置中,但其實只要是元件,都可以使用這個語法來置中。

text-align的特性為:可以置中(裡面的)元件,不能置中(自己本身的)版面。如以下程式碼:

<div class="box">
  <div class="item">
    <p>Hello, MUKI</p>
    <p>Nice to meet you</p>
  </div>
  <div class="item">
    <img src="http://placehold.it/100/100" alt="">
  </div>
</div>  

假使在.box使用text-align:center.box裡面的所有元件會置中,但他自己(版面)不會置中。

https://ithelp.ithome.com.tw/upload/images/20190904/20120631CXlLSksqAc.png

又,假使將text-align寫在父元件,那所有的子元件都會受到影響而置中。

/* box 裡面所有的子元件都會置中 */
.box {
  text-align: center;
}

也可以寫在子元件上,這樣就只有子元件自己會置中。

/* item 這個子元件會置中 */
.item {
  text-align: center;
}

只適用於行內元素與表格的 vertical-align

大家對vertical-align常常有一種誤解,覺得他跟text-align用法一樣,只要寫上去,那麼所有的子元素就會乖乖的垂直置中。

只能說,夢想與現實往往是相反的 XD,別以為他們都有個align就是親兄弟啦((燦笑

vertical-align最大的一個特性是,只適用於行內元素(inline),也就是只適用於預設為display:inline的元素。

因此要讓兩個div,或是兩個p垂直置中是辦不到的,因為他們預設都是display:block。

img以及a預設為display:inline,所以如果要做一個簡單的圖文置中,可以直接用該語法:

<div class="box">
Hello, this is MUKI <img src="http://placehold.it/100/100">
</div>
CSS
.box img {
  vertical-align: middle;
}

▼ 結果如下:

https://ithelp.ithome.com.tw/upload/images/20190904/20120631YWSjy5kS9f.png

但現實情況下,我們可能會碰到多行文字的需求。如果單純用br換行,會被視為兩個行元素,所以圖片只會跟最後一個行元素對齊,

▼ 如下圖所示:

https://ithelp.ithome.com.tw/upload/images/20190904/20120631Apt6AygciW.png

碰到這種狀況該如何處理呢?

所幸,除了display:inline可做為行內元素外,display:inline-block也是算作行內元素的一份子唷 (外層是 inline,內層是 block)。

我們可以試著將span設成inline-block看看效果

.box__text span {
  display: inline-block;
}

看起來是置中了~,但如果你是個對置中有所追求的設計師,會覺得他好像不是真的置中。

原因是vertical-align:middle的對齊依然以從br斷開的這個行內為對齊元素。亦即,他對齊的對象是最後一行的 Who are you? ,而非兩句加起來的 Hello, this is MUKI.Who are you?

▼ 我們可以試著讓文字變成三行、四行…等,就會更清楚地發現,永遠只有最後一行文字跟右側的圖片垂直置中。

https://ithelp.ithome.com.tw/upload/images/20190904/20120631yKfu4EsprY.png

接下來你可能會好奇,那我們還可以用vertical-align解決這個問題嗎?

答案是肯定的!(不然他的存在也太雞肋了 XDDDD)

在標題有提到,他可以用在行內元素跟表格,所以碰到這樣的切版,我們還有最後一招,就是用表格去解,將元素改為display: table-cell即可。

<div class="box">
  <div class="box__text">
    Hello, this is MUKI<br />Who are you?<br />This is Line Three.
  </div>
  <div class="box__text">
    <img src="http://placehold.it/100/100">
  </div>
</div>
.box__text {
  display: table-cell;
  vertical-align: middle;
}

承上,如果要在表格使用vertical-align,就直接將元素改為display: table-cell,然後加上vertical-align:middle即可。

▼ 這樣就會是兩個table-cell的置中了。

https://ithelp.ithome.com.tw/upload/images/20190904/20120631smdVTHKoCT.png


除了兩大align哥外,還有其他 CSS 語法也可以幫我們對齊版面或元件,明天會繼續把它補完。


下一篇
[30 道難解的 CSS 排版] 第 2 道:認識對齊 II
系列文
30 道難解的 CSS 排版2
1
hannahpun
iT邦新手 5 級 ‧ 2019-09-05 01:38:27

原來 vertical align 這樣用,難怪我從來沒成功過. 感謝分享

0
hannahpun
iT邦新手 5 級 ‧ 2019-09-05 01:38:28

原來 vertical align 這樣用,難怪我從來沒成功過. 感謝分享

0
akria
iT邦新手 5 級 ‧ 2019-09-17 14:43:21

感謝分享,讓我再次了解到熟悉CSS的語法
是多麼重要

我要留言

立即登入留言