CSS 文字垂直置中技巧
會寫這一篇是因為在 CSS 中要水平置中相當簡單，只要使用 text-align 即可，但是垂直置中就不是這麼容易的事情，其實說難也不難，只要用一點小技巧就可以做出文字垂直置中的效果，本篇用的是 line-height 行高的技巧。
CSS 文字垂直置中範例
由此範例可以看到文字已經在區塊垂直方向置中了，甚至連水平都置中了。
稍為解說一下這段語法，手先是 DIV 區塊將文字包在裡面，style 的部分，我們設定了背景顏色（background-color:#C7FF91）、寬度（width:300px）、高度 （height:100px）、水平置中對齊（text-align:center）以及最重要的 line-height100px。
由於 DIV 區塊的高度設定為 100px，這時候設定文字的 line-height（行高）也是 100px，就自然而然的垂直置中囉！
延伸閱讀
CSS 文字垂直置中範例
<DIV style="border-style:solid;background-color:#C7FF91;width:300px;height:100px;text-align:center;line-height:100px;">
測試文字垂直置中
</DIV>
呈現結果測試文字垂直置中
</DIV>
測試文字垂直置中
test
由此範例可以看到文字已經在區塊垂直方向置中了，甚至連水平都置中了。
稍為解說一下這段語法，手先是 DIV 區塊將文字包在裡面，style 的部分，我們設定了背景顏色（background-color:#C7FF91）、寬度（width:300px）、高度 （height:100px）、水平置中對齊（text-align:center）以及最重要的 line-height100px。
由於 DIV 區塊的高度設定為 100px，這時候設定文字的 line-height（行高）也是 100px，就自然而然的垂直置中囉！
延伸閱讀
沒有留言:
張貼留言