您當(dāng)前位置：圖趣網(wǎng)（Tuquu） >> 網(wǎng)頁(yè)設(shè)計(jì)教程 >> 移動(dòng)前端 >> 瀏覽設(shè)計(jì)教程

css中不確定高度垂直居中2種方法

2014/10/29 10:23:17來(lái)源：互聯(lián)網(wǎng)

不確定高度垂直居中
實(shí)例一：

 代碼如下  

/* center < */
.vetically {
    vertical-align: middle;
    display: table-cell;
    *position: relative;
}
.vetically_C {
    display: block;
    margin: 0 auto;
    text-align: center;
    *position: absolute;
    *top: 50%;
    *left: 50%;
    *margin-top: expression(-(this.height ) / 2);
    *margin-left: expression(-(this.width ) / 2);
}
/* center > */

　　例子2

　　標(biāo)準(zhǔn)瀏覽器的情況還是和上面一樣，不同的是針對(duì)IE6/IE7利用在img標(biāo)簽的前面插入一對(duì)空標(biāo)簽的辦法。

 代碼如下  

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>方法2 - 未知高度的圖片垂直居中</title> 
<style type="text/css"> 
body { 
height:100%; 
} 
#box{ 
width:500px;height:400px; 
display:table-cell; 
text-align:center; 
vertical-align:middle; 
border:1px solid #d3d3d3;background:#fff; 
} 
#box img{ 
border:1px solid #ccc; 
} 
</style> 
<!--[if IE]> 
<style type="text/css">? 
#box i { 
display:inline-block; 
height:100%; 
vertical-align:middle 
} 
#box img { 
vertical-align:middle 
} 
</style> 
<![endif]--> 
</head> 
<body> 
<div id="box"> 
<i></i><img src="images/demo_zl.png" alt="" /> 
</div> 
</body> 
</html>

 
[教程作者：admin]
關(guān)鍵詞：css 前端開(kāi)發(fā) 垂直居中 高居中 css代碼
免責(zé)聲明：本站文章系圖趣網(wǎng)整理發(fā)布，如需轉(zhuǎn)載，請(qǐng)注明出處，素材資料僅供個(gè)人學(xué)習(xí)與參考，請(qǐng)勿用于商業(yè)用途！
本文地址：http://m.pkvc.cn/tutorial/wd2526.html
CSS隱藏文字的方法
飛天俠淘寶客程序“非法廣告類(lèi)型”錯(cuò)誤修復(fù)補(bǔ)丁
圖趣網(wǎng)微信
建議反饋
×