<div>
把我置中
</div>
我原本是使用這個方法,給div一個line-height,有了line-height就可以用css的垂直對齊了。
- div{ height:30px; line-height:30px; }
不過缺點是只能單行對齊。
後來又看到一個方法,是把div模擬成table,這樣就可以作區塊的div對齊了。
<div id="wrap">
<div id="cell">
<div id="content">
要被置中的內容
</div>
</div>
</div>
然後將css這樣設:
- #wrap { display:table; }
- #cell { display:table-cell; vertical-align:middle; }
就可以變成想要的垂直方向置中了,不過這個方法只適用在IE8以上,不過IE該死,有好方法還是可以學起來。
我是參考這篇文章,裡面還有好幾種方法,可以試試看。
CSS Vertical Align(用純CSS解決div垂直置中)
0 意見:
張貼留言