可兼容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>點擊查看更多內容
3人點贊
評論
評論
共同學習，寫下你的評論
評論加載中...
作者其他優質文章
正在加載中
感謝您的支持，我會繼續努力的～
掃碼打賞，你說多少就多少
贊賞金額會直接到老師賬戶
支付方式
打開微信掃一掃，即可進行掃碼打賞哦