文字或图片元素在DIV中垂直居中
(编辑：jimmy 日期: 2024/12/24 浏览：3 次 )
复制代码 代码如下:
<!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="/UploadFiles/2021-04-02/eek.gif"> </div>
</div>
</div>
<div class="frame">
<div class="outer">
<div id="middle">
<div id="inner">
<img src="/UploadFiles/2021-04-02/eek.gif"> <img src="http://bbs.blueidea.com/images/smilies/eek.gif"> </div>
</div>
</div>
</div>
<div class="frame">
<div class="outer">
<div id="middle">
<div id="inner">图片与文本内容混合<br><img src="/UploadFiles/2021-04-02/xsgs_21004.gif"> </div>
</div>
</div>
<div class="frame">
<div class="outer">
<div id="middle">
<div id="inner"><span>图片与文本</span><img src="/UploadFiles/2021-04-02/xsgs_21004.gif"> </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>
<!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="/UploadFiles/2021-04-02/eek.gif"> </div>
</div>
</div>
<div class="frame">
<div class="outer">
<div id="middle">
<div id="inner">
<img src="/UploadFiles/2021-04-02/eek.gif"> <img src="http://bbs.blueidea.com/images/smilies/eek.gif"> </div>
</div>
</div>
</div>
<div class="frame">
<div class="outer">
<div id="middle">
<div id="inner">图片与文本内容混合<br><img src="/UploadFiles/2021-04-02/xsgs_21004.gif"> </div>
</div>
</div>
<div class="frame">
<div class="outer">
<div id="middle">
<div id="inner"><span>图片与文本</span><img src="/UploadFiles/2021-04-02/xsgs_21004.gif"> </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>
下一篇：关于CSS：优先级