参考一下“Div图片垂直居中的方法-曾经淘宝UED招聘时的一道面试题 ”
针对IE的Hack
*display: block;
*font-size: 175px;/*约为高度的0.873，200*0.873 约为175*/
*font-family:Arial;/*防止非utf-8引起的hack失效问题，如gbk编码*/
<!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=utf-8" />
<title>Div图片垂直居中的方法</title>
</head>
<style>
.box {
display: table-cell;
vertical-align:middle;
text-align:center;
*display: block;
*font-size: 175px;
*font-family:Arial;
width:200px;
height:200px;
border: 1px solid #eee; }
.box img {
vertical-align:middle; border:0;}
</style>
<body>
<div class="box">
<a href="http://www.howpm.com" target="_blank"><img src="http://howpm.com/images/dz7/logo.gif" /></a>
</div>
</body>
</html>
针对IE的Hack
*display: block;
*font-size: 175px;/*约为高度的0.873，200*0.873 约为175*/
*font-family:Arial;/*防止非utf-8引起的hack失效问题，如gbk编码*/
<!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=utf-8" />
<title>Div图片垂直居中的方法</title>
</head>
<style>
.box {
display: table-cell;
vertical-align:middle;
text-align:center;
*display: block;
*font-size: 175px;
*font-family:Arial;
width:200px;
height:200px;
border: 1px solid #eee; }
.box img {
vertical-align:middle; border:0;}
</style>
<body>
<div class="box">
<a href="http://www.howpm.com" target="_blank"><img src="http://howpm.com/images/dz7/logo.gif" /></a>
</div>
</body>
</html>
1514
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
