标签：图片和多行文本的垂直居中
<!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 charset="UTF-8">
<title>图片和多行文本的垂直居中</title>
<style type="text/css">
.box01{ line-height: 200px; font-size: 0; font-size: 1px\9; text-align: center; background: #ddd;}
.box01 img{ vertical-align: middle;}
.box02{ line-height: 200px; font-size: 0; font-size: 1px\9; text-align: center; background: #ddd; margin-top: 20px;}
.box02 .text{ display: inline-block; vertical-align: middle; max-width: 70%; line-height: 24px; font-size: 14px; text-align: left;}
.box03{ line-height: 200px; font-size: 0; font-size: 1px\9; text-align: center; background: #ddd; margin-top: 20px;}
.box03 .ico{ display: inline-block; vertical-align: middle; background: url(http://pimg1.4008000000.com/app_images/4008000000/youhui/cpbaoxian/official/nvshenjiehd2016/nsj_ico.png) no-repeat; width: 49px; height: 49px; background-position: -111px 0;}
.box03 .text{ display: inline-block; vertical-align: middle; width: 200px; line-height: 24px; font-size: 14px; text-align: left; margin: 0 0 0 10px;}
</style>
</head>
<body>
<div class="box01">
<img src="http://www.4008000000.com/app_upload/images/newchannel/story/10024802.jpg" width="296" height="162" alt="涉水行驶，“心脏”受得了吗？">
</div>
<div class="box02">
<span class="text">
这就是内容这就是内容这就是内容这就是内容这就是内容这就是内容这就是内容这就是内容这就是内容这就是内容这就是内容这就是内容这就是内容这就是内容这就是内容这就是内容这就是内容这就是内容这就是内容这就是内容这就是内容这就是内容这就是内容这就是内容这就是内容这就是内容这就是内容这就是内容这就是内容这就是内容这就是内容这就是内容这就是内容这就是内容这就是内容这就是内容这就是内容这就是内容这就是内容这就是内容这就是内容这就是内容这就是内容这就是内容
</span>
</div>
<div class="box03">
<span class="ico"></span>
<span class="text">
这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容
</span>
</div>
</body>
</html>
标签：图片和多行文本的垂直居中
原文地址：http://iicoo.blog.51cto.com/10739372/1764263
