CSS 文字垂直置中技巧

會寫這一篇是因為在 CSS 中要水平置中相當簡單,只要使用 text-align 即可,但是垂直置中就不是這麼容易的事情,其實說難也不難,只要用一點小技巧就可以做出文字垂直置中的效果,本篇用的是 line-height 行高的技巧。

CSS 文字垂直置中範例
<DIV style="background-color:#C7FF91;width:300px;height:100px;text-align:center;line-height:100px;">
 測試文字垂直置中
</DIV>
呈現結果
測試文字垂直置中

由此範例可以看到文字已經在區塊垂直方向置中了,甚至連水平都置中了。

稍為解說一下這段語法,手先是 DIV 區塊將文字包在裡面,style 的部分,我們設定了背景顏色(background-color:#C7FF91)、寬度(width:300px)、高度(height:100px)、水平置中對齊(text-align:center)以及最重要的 line-height100px。

由於 DIV 區塊的高度設定為 100px,這時候設定文字的 line-height(行高)也是 100px,就自然而然的垂直置中囉!

延伸閱讀
© Copyright wibibi.com 網頁設計教學百科 基礎的網頁設計規劃、資料庫與程式設計 Since 2012
PHP Smarty MySQL JQuery Apache W3C