文字或圖片元素在DIV中垂直居中
更新時(shí)間：2006年09月06日 00:00:00 作者：
復(fù)制代碼 代碼如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GB2312" />
<title>Untitled Document</title>
<style type="text/css">
<!--
.frame{
float:left;
margin:2px;
}
.outer {
height: 250px;
width: 240px;
overflow: hidden;
background:gold;
position: static !important;
position: relative;
display: table !important;
}
#middle { /* for explorer only*/
position: absolute;
top: 50%;
}
#middle[id] {
display: table-cell;
vertical-align: middle;
position: static;
}
#inner { /* for explorer only */
position: relative;
top: -50%;
width: 100%;
margin: 0 auto;
text-align:center
}
</style>
</head>
<body>
<div class="frame">
<div class="outer">
<div id="middle">
<div id="inner"><img src="http://bbs.blueidea.com/images/smilies/eek.gif" alt="" /></div>
</div>
</div>
</div>
<div class="frame">
<div class="outer">
<div id="middle">
<div id="inner">
<img src="http://bbs.blueidea.com/images/smilies/eek.gif" alt="" /><br /><br />
<img src="http://bbs.blueidea.com/images/smilies/eek.gif" alt="" />
</div>
</div>
</div>
</div>
<div class="frame">
<div class="outer">
<div id="middle">
<div id="inner">圖片與文本內(nèi)容混合<br><img src="http://desk.blueidea.com/QTZY/GIF/xsgs_21/xsgs_21004.gif" alt="" /><br>圖片與文本內(nèi)容混合</div>
</div>
</div>
</div>
<div class="frame">
<div class="outer">
<div id="middle">
<div id="inner"><span>圖片與文本</span><img src="http://desk.blueidea.com/QTZY/GIF/xsgs_21/xsgs_21004.gif" alt="" align="middle" /><span>圖片與文本</span></div>
</div>
</div>
</div>
<div class="frame">
<div class="outer">
<div id="middle">
<div id="inner">5454545445445<br>5454545445445<br>5454545445445<br>5454545445445<br>5454545445445<br>5454545445445<br>5454545445445<br>5454545445445<br></div>
</div>
</div>
</div>
</body>
</html>
相關(guān)文章
鮮為人知的CSS技巧10則...2006-09-09
最基本的幾種CSS文字濾鏡效果...2006-09-09
On having layout...2006-09-09
alt屬性和title屬性...2006-09-09
詳解IE6中的position：fixed問題與隨滾動(dòng)條滾動(dòng)的效果
這篇文章主要介紹了詳解IE6中的position：fixed問題與隨滾動(dòng)條滾動(dòng)的效果的相關(guān)資料,希望通本文能幫助到大家，需要的朋友可以參考下2017-09-09
CSS做一個(gè)超鏈接的陷下效果...2006-09-09
XHTML標(biāo)準(zhǔn)語法...2006-09-09
常用CSS縮寫語法總結(jié)...2006-09-09
IE最新的欺騙代碼...2006-06-06
CSS超級(jí)技巧大放送合集...2006-06-06