font

8月 12, 2015

css把多行文字垂直置中的方法:利用偽元素就對啦


最近在切版的時候有多行文字需要垂直對齊一塊div的需要
但是發現在外層div不固定高度的情況下
文字無法對齊這樣高度不一樣的div

後來發現只要在該div加入偽元素 :brfore
假設我div的名字叫做 text123
那麼CSS只要再加入這個樣式

text123:before {
  content: "";
  height: 100%;
  display: inline-block;
  vertical-align: middle;
}

就可以讓 text123 這塊div裡面的文字完全依照高度來置中對齊啦!


好啦~其實這篇是要記給我自己看的
有點過於簡單了
如果漏掉了什麼地方~
可以參考網路上的這篇整個詳細到爆炸:「更多 CSS 達成 Div 垂直置中的方法研究」
Related Posts Plugin for WordPress, Blogger...

ShareThis