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

本文為參加第 11 屆「iT 邦幫忙鐵人賽」系列文章,會優先在部落格發文,再貼到 iT 邦幫忙~。
如果文章對您有幫助,歡迎到 iT 邦幫忙給我一個訂閱與肯定 ^___^。
好久沒寫文了,也希望自己可以堅持 30 天,加油(握拳

昨天講了text-align以及vertical-align這兩個常見的對齊語法,但他們可以對齊的範圍都比較小,偏向對齊元件,而非版面。
如果要讓版面置中,或是再更複雜的一些排版,我們還可以有更多選擇。

版面置中的好幫手: margin

這個應該很多人都用到爛掉了,但有的朋友可能不太懂原理,在此簡單介紹一下。

我們在切一個大版面時,如果要讓他左右置中,現在普遍最快的方法是使用以下語法:

CSS

然後版面就可以置中了。

margin: 0 auto;margin: 0 auto 0 auto; 的簡寫,表示上下邊界為 0 ,左右為auto表示自己均分。margin會去判斷.container的寬度以及螢幕的寬度,相減之後除以二就是左右邊界的數值了。

至於該如何得到.container的寬度呢?就是必須要在 CSS 寫上寬度,如果沒寫寬度是不會有效果的。

margin大到版面,小到元件,只要有指定元素的寬度,幾乎都可以用這個方法左右置中。

CSS

更多的 margin

☞ 圖片一樣可以使用margin: 0 auto;置中
margin可以讓版面置中,但沒辦法讓文字置中唷。


讓 padding 幫你實現簡單的垂直置中

如果說margin是負責版面,那padding就是負責裡面的元素了。

我們可以利用padding將 Box Model 往外推的特性做到置中的效果,只要上下數值一樣就可以囉。

CSS

選單文字垂直置中的首選 line-height

▼ 假設今天要製作一個類似這樣的選單,文字需要垂直置中,同時又有限定元素的高度。

因為有限定高度,所以我們沒辦法用padding去推 Box Model;另外一個原因是,如果選單再複雜一點,padding通常都另有用途。

所以假設今天需求是:

  • 有限定元素高度
  • 文字需垂直置中
  • 文字非常單純只有一行

在上述的情況下,可以直接用line-height解決,只要讓line-heightheight高度相同即可

CSS

用 position 讓你的版面水平垂直置中

position的解法,我之前在部落格有寫過了,所以容我直接跳過~
有興趣的朋友可以直接參考這一篇文章:用 css 讓區塊水平垂直置中


用 transform 做出與 position 類似的置中效果

transformposition類似,都是直接將 Box Model 推移到特定的位置上,達到置中的效果。

使用position可以再利用margin去推算要定位的位置,但前提是你必須要知道元素的寬跟高,才有辦法回推。但使用positiontransform就不用特別設定寬跟高,非常的方便

CSS

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

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

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

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

(閱讀全文…)