可兼容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 class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="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>點(diǎn)擊查看更多內(nèi)容
3人點(diǎn)贊
評(píng)論
評(píng)論
共同學(xué)習(xí)，寫(xiě)下你的評(píng)論
評(píng)論加載中...
作者其他優(yōu)質(zhì)文章
正在加載中
感謝您的支持，我會(huì)繼續(xù)努力的～
掃碼打賞，你說(shuō)多少就多少
贊賞金額會(huì)直接到老師賬戶
支付方式
打開(kāi)微信掃一掃，即可進(jìn)行掃碼打賞哦