水平置中的三種方法,你用對了嗎?

使用CSS置中時遇到問題了嗎?
爬了網路上很多文章還是找不到問題出在哪裡?
其實是因為不同人要設計的置中元素(content)以及他的父元素(container)會有好幾種不同的狀況組合,而往往這些小小的差別就是決定置中成敗的關鍵哪!

 

今天小編不只要為大家介紹水平置中的三種主流方法,還會有實際的應用範例!置中的部分都是配合RWD的設計!(就是有吃「橡膠果實」超能力的網頁元素們啦!)
本篇最後還會附上超好用的置中小幫手,給各位急用的客官參考喔!

 

一起來看看吧!

前情提要

每一種網頁元素都會有html為它預設的display屬性。
分為inline element以及block-level element。
*會自適應內容大小。
*不能設定width、height、margin、background-img等。
*如:a、span、img…
*預設會佔滿父元素的寬度。
*如:div、p、ul、li、h1、h2…
 
順便介紹一下等等會用到的:
♦  display: inline-block 
inline-block顧名思義就是兩種性質都來一點。
更貼切一點來說,它的外在是 inline 內在是 block,
外在像inline不會換行且會自適應大小,
內在像block可以設定width、height、margin、background-img…等參數。
這樣多功能的特性是超級方便的啊!

text-align: center;

♦  主要用在inline element

在父元素設定text-align: center,該父元素內部所有的元素(不管幾層以下),只要是文字或是inline element(如:a、img)就會乖乖依據個別的父元素寬度進行水平置中定位。意思是只要最外層的父元素有設定text-align: center,裡面的inline element通通都會有水平置中的效果!
*不知道元素寬度也可以使用。(當然囉~因為inline element都是未知寬度的)

♦  若是block-level element怎麼辦?

若是block-level element(如:div、h1、ul)並同時有設定width之元素,該區塊則不配合置中(但是內部的文字或其餘inline性質的也會依據其父元素位置而有置中效果喔)。
1. 這時候就需要加上position: inline-block,讓該元素擁有inline特性後可以解決。
2. 或是加上該元素的固定寬度(如:px、%),並搭配下一步的margin: 0 auto也可以達成。
 範例
使用text-align搭配不同元素特性及調整所製作的網頁選單

 

 


margin: 0 auto;

♦  主要用在block-level element

有時候我們想針對一個區塊水平置中,而在該元素已知寬度(如:px、%)下,可以在置中元素內設定margin:0 auto。
*如果區塊的寬度沒有設定(或是可變動的),會直接佔用整個寬度空間。亦即此方法務必要先對置中元素設定好固定寬度!
*若置中的元素要能夠有自適應內容大小的效果,則不建議使用此方法(改用上一種方法)。

♦  若是inline element怎麼辦?

inline element沒辦法設定width、margin…blablabla,要加上position: block後才能設定margin並完成置中。
常看到有些朋友遇到對img置中卻無法working的問題。很可能就是因為不小心忽略img是被預設為inline element的!需要轉換成block-level element才能設定margin並完成置中。
下次遇到你設計的元素無法乖乖置中時,可以檢查看看它的html tag是不是使用到了inline的預設值?
 *img特性補充:img雖然常被歸類在inline element,但其實是可以直接設定width、height、margin的,唯獨沒辦法配合margin: 0 auto進行置中。
 範例
使用margin: 0 auto置中不同大小的區塊、照片(apple logo)的iphone5s
別問我為何要放iphone5s…,其實只是一時想不到有什麼適合的範例XD

 

 


 position: absolute;

left: 50%;

transform: translateX(-50%);

上面一段加在置中元素內,要記得在父元素裡加上position: relative;。

*有設定position: absolute的元素會自動忽略static的元素,並往更上層去找其他非static的父元素來定位。因此父元素的position必須要是非預設(default)的static值。(其實設定為relative、absolute或fixed都可以)
*translateX(-50%)的50%是依據該置中元素。
*不論是inline還是block-level,有設定寬度還是沒設定寬度,都可以使用!
*同樣的模式也用在垂直置中。
*詳細一點來看一下步驟圖解吧!會直接呈現水平+垂直置中。

2015年CSS3出來之後,才由transform: translateX(-50%)取代margin-left: -(一半寬度)進行回歸。
由於margin-left的比例是依據父元素,只能使用準確的px值達成置中元素的一半寬度。因此舊的做法會很難配合RWD的設計,只要螢幕寬度縮小造成該元素位置比例跟著改變時,原本恰恰好的margin回歸設計就會被打亂。

超級置中小幫手

最後的最後要來介紹個好用的小東西!快速置中小幫手!
急著要解決置中元素不乖乖聽話的問題,而實在沒有時間仔細研究上述的方法跟細節嗎?爬了好多文了還是沒法度嗎?

 

 

只要設定好你目前的狀況(例如寬度高度已不已知啊?是一堆文字還是照片?),它就會提供針對你的狀況完成專屬的範例code!是非常貼心的小幫手啊!
不過還是建議想在網頁領域打滾的朋友們,有時間還是盡量盡量真正去瞭解各種方法的使用時機和原因啦。哈哈