CSS 垂直置中解法| 小惡魔- 電腦技術 | css text-align vertical center
相信大家在Google[1]可以找到很多解法[2],這幾天在Facebook發現更精彩的解決方式[3],就是用CSS:before[4]跟inline-block[5],底下提供範例:html程式碼123456789101112
相信大家在Google[1]可以找到很多解法[2],這幾天在Facebook發現更精彩的解決方式[3],就是用CSS:before[4]跟inline-block[5],底下提供範例:html程式碼123456789101112
相信大家在 Google[1] 可以找到很多解法[2],這幾天在 Facebook 發現更精彩的解決方式[3],就是用 CSS:before[4] 跟 inline-block[5],底下提供範例:
html 程式碼
1 2 3 4 5 6 7 8 9 10 11 12 <!DOCTYPE html> <html> <head> <meta charset=utf-8 /> <title>JS Bin</title> </head> <body> <div class="ot"> <div class="wrapper"></div> </div> </body> </html>CSS 程式碼
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 .ot { width: 400px; height: 400px; border: 1px solid #FF6600; text-align: center; margin: 0 auto; } .ot:before { content: ; display: inline-block; vertical-align: middle ; height: 100%; } .wrapper { display: inline-block; vertical-align: middle; width: 200px; height: 200px; background: #ccc; }Demo 結果
JS Bin[6]{.jsbin-embed}
感謝留言提供一個不錯的教學連結: 未知高度多行文本垂直居中[7],可以讓文字置中,也是透過上述方法。一般單行文字置中,可以透過底下方式
1 2 3 4 .text { height: 26px; line-height: 26px; }如果是多行文字呢?也就...