复制代码 代码如下:
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=GB2312"/>
<title>UntitledDocument</title>
<styletype="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{/*forexploreronly*/
position:absolute;
top:50%;
}
#middle[id]{
display:table-cell;
vertical-align:middle;
position:static;
}
#inner{/*forexploreronly*/
position:relative;
top:-50%;
width:100%;
margin:0auto;
text-align:center
}
</style>
</head>
<body>
<divclass="frame">
<divclass="outer">
<divid="middle">
<divid="inner"><imgsrc="http://bbs.blueidea.com/images/smilies/eek.gif"alt=""/></div>
</div>
</div>
</div>
<divclass="frame">
<divclass="outer">
<divid="middle">
<divid="inner">
<imgsrc="http://bbs.blueidea.com/images/smilies/eek.gif"alt=""/><br/><br/>
<imgsrc="http://bbs.blueidea.com/images/smilies/eek.gif"alt=""/>
</div>
</div>
</div>
</div>
<divclass="frame">
<divclass="outer">
<divid="middle">
<divid="inner">图片与文本内容混合<br><imgsrc="http://desk.blueidea.com/QTZY/GIF/xsgs_21/xsgs_21004.gif"alt=""/><br>图片与文本内容混合</div>
</div>
</div>
</div>
<divclass="frame">
<divclass="outer">
<divid="middle">
<divid="inner"><span>图片与文本</span><imgsrc="http://desk.blueidea.com/QTZY/GIF/xsgs_21/xsgs_21004.gif"alt=""align="middle"/><span>图片与文本</span></div>
</div>
</div>
</div>
<divclass="frame">
<divclass="outer">
<divid="middle">
<divid="inner">5454545445445<br>5454545445445<br>5454545445445<br>5454545445445<br>5454545445445<br>5454545445445<br>5454545445445<br>5454545445445<br></div>
</div>
</div>
</div>
</body>
</html>
【文字或图片元素在DIV中垂直居中】相关文章：