可兼容html4和html5的doctype声明，兼容谷歌、火狐、IE7、8、9、10、11
代码如下：
<!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\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\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\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>
随时随地看视频
