2011年12月19日 星期一

用純CSS讓div垂直置中

垂直置中在table裡很容易,只要在td加valign="middle"就可以了,不過要在div裡就不是那麼容易,div要水平置中可以使用"margin:0 auto;",可是垂直置中卻不能用"margin:auto 0;",不過還好有找到方法,很實用,可以學起來。

<div>
把我置中
</div>

我原本是使用這個方法,給div一個line-height,有了line-height就可以用css的垂直對齊了。
  1. div{  height:30pxline-height:30px; }  

不過缺點是只能單行對齊。

後來又看到一個方法,是把div模擬成table,這樣就可以作區塊的div對齊了。

<div id="wrap">
<div id="cell">
<div id="content">
要被置中的內容
</div>
</div>
</div>

然後將css這樣設:
  1. #wrap { display:table; }   
  2. #cell { display:table-cellvertical-align:middle; }  

就可以變成想要的垂直方向置中了,不過這個方法只適用在IE8以上,不過IE該死,有好方法還是可以學起來。

我是參考這篇文章,裡面還有好幾種方法,可以試試看。
CSS Vertical Align(用純CSS解決div垂直置中)
反應:

0 意見:

Related Posts Plugin for WordPress, Blogger...