問題討論區


【CSS 語法】文章精華區


【教學】 使用CSS實現垂直置中



使用CSS實現垂直置中
飛肯老師
註冊日期:
2008/3/25 19:31
留言: 13
假設一個寬高皆為500px的div區塊,裡面放著一張圖片
這時需要將它水平及垂直置中

html原始碼為
<div><img alt="" src="pic.jpg" /></div>

CSS碼為
div{ width:500px; height:500px; background-color:#CCCCCC; display:table-cell; text-align:center; vertical-align:middle;}

其中的display:table-cell;是將div模擬為<td>,再加上vertical-align:middle;便可做到垂直置中
但以上方法只適用於IE8 & Firefox

-------------------------------------------------------------------------
IE6及IE7需另加一些東西

html原始碼為
<div><span></span><img src="pic.jpg" /></div>

CSS碼為
div{ width:500px; height:500px; background-color:#CCCCCC; display:table-cell; text-align:center; vertical-align:middle;}
div span{ height:100%; display:inline-block;}
div *{ vertical-align:middle;}

在<img>前方加上<span></span>
再將span屬性加上 height:100%; display:inline-block;
而[div *]意思是div以內的"所有東西",再加上 vertical-align:middle;

如此便能做到IE6及IE7的垂直置中

2009/12/8 14:20
 









[高級搜索]


 

課程首頁】 【最新開課時間表】 【範例教學分享區】 【交流討論區】 【企業包班】 【詢問課程】 【合作提案】 【誠徵講師

 

【飛肯設計學苑】 台北市公園路 30-1 號 5 樓 聯絡電話:(02)2370-1122 / 0925-014-000 信箱:flycan@flycan.com.tw
服務時間:(平日)下午 2 點 ~ 晚上 10 點 / (假日)早上 9 點 ~ 下午 5 點

 

台北市短期補習班立案 第 6631 號

TOP

【 Flycan.com 】 Powered by XOOPS