css 文字竖直居中的写法和图片垂直居中代码(图文)
界面上文章左右居中使用text-aligin:center，上下竖直居中的写法如下，
图片垂直居中的代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>文字、图片居中显示的方法</title>
<style type="text/css">
.content{
height: 40px;
line-height: 40px;
border:1px double #abc;
}
.myimg{
/*非IE的主流浏览器识别的垂直居中的方法*/
display: table-cell;
vertical-align:middle;
text-align:center;
/* 针对IE的Hack */
*display: block;
*font-size: 175px;/*约为高度的0.873，200*0.873 约为175*/
*font-family:Arial;/*防止非utf-8引起的hack失效问题，如gbk编码*/
height:500px;
border: 1px solid #eee;
}
.myimg img{
vertical-align:middle;
}
</style>
</head>
<body>
<div class="content">
aaaaaaaAAAAAAAA
</div>
<div class="myimg">
<img src="http://img0.bdstatic.com/img/image/shouye/sjtb001.jpg" width="271px" height="234px"></img>
</div>
</html>
垂直居中显示效果如下：
来源：//作者：/更新时间：2014-06-01
顶
踩
相关文章：
