如果要讓物件垂直置中,像是下面圖這樣的呈現!#content在父容器#box的垂直中間
基本上可以用css的 vertical-align: middle;,但這方法只能在table的td中使用,如果是div就無效了,後來上網查了一下資料發現css3有更好的方法能能決這問題,就是吧#box定義為table,吧#content定義為td,這樣就能用 vertical-align: middle;來垂直置中對齊物件了,真是好方便阿,方法如下:
結構
<div id="box">
<div id="content">
垂直置中物件內容
</div>
</div>
CSS
#box {
display: table;
}
#content {
display: table-cell;
vertical-align: middle;
}
這樣就OK了阿,有需要的朋友參考看看喔!!
參考資料來源:http://muki.tw/tech/css-div-center/
教學撰寫:徐嘉裕 Neil hsu
結構
<div id="box">
<div id="content">
垂直置中物件內容
</div>
</div>
CSS
#box {
display: table;
}
#content {
display: table-cell;
vertical-align: middle;
}
這樣就OK了阿,有需要的朋友參考看看喔!!
參考資料來源:http://muki.tw/tech/css-div-center/
教學撰寫:徐嘉裕 Neil hsu
留言
張貼留言