2015
02
16

CSS 垂直置中的三個方法

關鍵字:CSS垂直置中

我們在編輯一個版面,通常都會用到水平置中和垂直置中來設計,而水平置中很好處理,不外乎就是設定 margin:0 auto;或是 text-align:center;,就可以輕鬆解決掉水平置中的問題,但一直以來最麻煩對齊問題,都是「垂直置中」這個討人厭的設定,以下將介紹三種單純利用 CSS 垂直置中的方式:「設定行高」、「添加偽元素」、「calc 動態計算」,其實一點也不難 ( 當然跟水平置中比起來難了一點 ),只需要觀念正確就可以解決。

設定行高 ( line-height )

設定行高是垂直置中最簡單的方式,適用於「單行」的「行內元素」 ( inline、inline-block ),例如單行的標題,或是已經設為 inline-block 屬性的 div,若將 line-height 設成和高度一樣的數值,則內容的行內元素就會被垂直置中, 因為是行高,所以會在行內元素的上下都加上行高的 1/2 ,所以就垂直置中了!不過由此就可以看出,為什麼必須要單行的行內元素,因為如果多行,第二行與第一行的間距會變超大,就不是我們所期望的效果了。 CSS 範例:外層 div0,內容 redbox,讓 redbox 水平垂直置中。
傑立資訊傑立資訊事業有限公司

電話:(02)2739-9096 | 傳真:(02)2739-6637 | 客服:service@julyinfo.com | 臺北市大安區和平東路3段257號6樓map

© 2016 傑立資訊 All rights reserved.法律顧問:宇恒法律事務所