汇总图片、文本的垂直居中纯css实现简单

涉及到图片和文本，需要分如下几个部分：

1. 单行文本

2. 多行文本

3. 单张图片

4. 文本和图片混排（这种情况少见，应该单独处理）

经搜集，方法如下：

1. 表格实现

1. 简单设置height 和 line-height （仅单行文本可用）

2. table-cell 和position的配合（单行文本、单张图片、多行文本可行）

3. table-cell和writing-mode配合（单张图片可用）

4. table-cell和多余标签inline-block配合（单行文本、单张图片可行）

-------------------------------

具体代码如下：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title>垂直居中测试</title>

.wrapper{text-align:left; padding-bottom:50px; margin:0 auto; 980px; min-height:600px; height:auto !important; _height:600px;}

.title{height:30px; line-height:30px; text-align:center; font-size:14px; font-weight:bold;}

.container{padding: 10px; clear:both;}

.container .inner1{height:150px; padding: 0 20px; line-height: 150px; text-align: center; border: solid 1px #ccf; vertical-align: middle; float:left; display: inline; margin-left:20px;}

.container .inner2{height:150px; padding: 0 20px; vertical-align: middle; display: table-cell; border: solid 1px #ccf;}

.container .inner3{display:table; float:left; padding: 0 20px; text-align: center; 300px; height:150px; position:relative; border: solid 1px #ccf;}

.container .inner3 .inner{*position:absolute; 100%; left:0; vertical-align: middle; display: table-cell; top:50%;}

.container .inner3 .inner div{position:relative; top:-50%;}

.container .inner4{400px; height:300px; display: table-cell; text-align: center; vertical-align: middle; border: solid 1px #aaa; background: #eee;}

.container .inner4 i{display: inline-block; height:100%; vertical-align: middle;}

.container .inner4 img{vertical-align:middle}

.inner5{height:400px; line-height:20px; display: table-cell; 400px; vertical-align: middle; border: solid 1px #aaa; background: #eee; padding: 10px; text-align: center;}

.inner5 span{*writing-mode:tb-rl; *height:100%;}

.inner5 span img{vertical-align: middle}

</style>

<!--[if IE]>

.container .inner4 i{display: inline-block; height:100%; vertical-align: middle; 10px; background: #f00;}

.container .inner4 img{vertical-align:middle}

</style>

<![endif]-->

</head>

<body>

<h2 class="title">垂直居中测试</h2>

<div class="inner1">又是一段文本 <img src='/img/2.jpg'/></div>

</div>

<div class="inner2">又是一段文本 <img src='/img/2.jpg'/></div>

</div>

<div class="inner3"><div class="inner"><div>第一行文本<br/>第二行文本<br/>第三行文本<br/>第一行文本<br/>第二行文本</div></div></div>

<div class="inner3"><div class="inner"><div>又是一段文本   <img src='/img/2.jpg'/></div></div></div>

</div>

</div>

</div>

</center>

</body>

</html>

-----------------------------------

参考：http://www.cnblogs.com/rubylouvre/archive/2010/07/08/1774025.html

相关阅读:
Linux(centos)如何安装Zend Optimizer Zend Guard Loader
如何离线下载Chrome的安装包
如何解决""No boot device available(无可用的引导设备)”错误
mysql 存储及查询亿级数据
mysql explain用法和结果的含义
mysqldump参数详细说明(转)
MP4文件格式的解析，以及MP4文件的分割算法
Windows下搭建go语言开发环境以及开发IDE (附下载链接)
mysql 命令备份还原数据库
生成文件MD5

原文地址：https://www.cnblogs.com/chyong168/p/2256206.html

汇总图片、文本的垂直居中纯css实现 简单

汇总图片、文本的垂直居中纯css实现简单