CSS 文字垂直置中技巧 | HTML 表格 內 文字 置中
![CSS 文字垂直置中技巧](https://i.imgur.com/axBPWDg.jpg)
會寫這一篇是因為在CSS中要水平置中相當簡單,只要使用text-align即可,但是垂直置中就不是這麼容易的事情,其實說難也不難,只要用一點小技巧就可以做出文字垂直置中的效果,本篇用的是line-height行高的技巧。CSS文字垂直置中範例
![CSS 文字垂直置中技巧](http://pix4.agoda.net/hotelimages/4172139/0/24097f8fc1c9959ea5062e8d6497eaad.jpg?s=800x)
CSS 文字垂直置中範例
<DIV style="background-color:#C7FF91;width:300px;height:100px;text-align:center;line-height:100px;"> 測試文字垂直置中</DIV>
呈現結果測試文字垂直置中
由此範例可以看到文字已經在區塊垂直方向置中了,甚至連水平都置中了。稍為解說一下這段語法,手先是 DIV[3] 區塊將文字包在裡面,style 的部分,我們設定了背景顏色(background-color:#C7FF91)、寬度(width:300px)、高度(height:100px)、水平置中對齊(text-align:center)以及最重要的 line-height100px。
由於 DIV 區塊的高度設定為 100px,這時候設定文字的 line-height(行高)也是 100px,就自然而然的垂直置中囉!
延伸閱讀
[1][2]References text-align (www.wibibi.com) line-height (www.wibibi.com) DIV (www.wibibi.com)