難解的 CSS 排版:認識對齊(上)

我一直很想寫這系列的文章,一來是 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的特性為:可以置中(裡面的)元件,不能置中(自己本身的)版面。如以下程式碼:

HTML

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

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

CSS

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

CSS

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

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

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

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

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

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

HTML
CSS

▼ 結果如下:

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

▼ 如下圖所示:

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

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

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

CSS

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

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

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

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

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

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

HTML
CSS

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

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


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

想對你說 (ノ>ω<)ノ

感謝您閱讀到最後,對文章有任何疑問歡迎留言給我,我會盡快回覆。

Faceook / 不定時分享前端資訊與新知,歡迎追蹤!

 

如果這篇文章對您有幫助,請幫我點擊下方的廣告,讓我有更多的動力寫寫寫 (๑•̀ㅂ•́)و✧

guest
0 則留言
Inline Feedbacks
View all comments
粉絲團