复制代码 代码如下:
!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">图片与文本内容混合br>img src="http://desk.blueidea.com/QTZY/GIF/xsgs_21/xsgs_21004.gif" alt="" />br>图片与文本内容混合/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">5454545445445br>5454545445445br>5454545445445br>5454545445445br>5454545445445br>5454545445445br>5454545445445br>5454545445445br>/div>
/div>
/div>
/div>
/body>
/html>
您可能感兴趣的文章:- iOS - UIButton(UIEdgeInsets)/设置button上的文字和图片上下垂直居中对齐
- CSS图片响应式 垂直水平居中
- js+CSS 图片等比缩小并垂直居中实现代码
- javascript图片自动缩放和垂直居中处理函数
- 用css实现图片垂直居中的使用技巧
- 未知大小图片在已知容器中的垂直和水平居中问题
- JS实现图片垂直居中显示小结