在文章开头先说明一下此方法的兼容性，IE8+以及其他现代浏览器都支持此属性。

直接献上一个demo吧

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Table-cell Demo</title>

<style type="text/css">

body {

padding: 0;

margin: 0;

}

h3 {

position: absolute;

z-index: 9;

top: 0;

right: 0;

margin: 0;

}

h5 {

position: absolute;

z-index: 8;

top: 230px;

right: 0;

margin: 0;

color: red;

}

.line {

position: absolute;

width: 100%;

height: 250px;

border-bottom: 1px solid red;

}

.box {

/*非IE的主流浏览器识别的垂直居中的方法*/

display: table-cell;

vertical-align: middle;

/*设置水平居中*/

text-align: center;

/* 针对IE的Hack */

*display: block;

/*约为高度的0.873，200*0.873 约为175*/

*font-size: 175px;

/*防止非utf-8引起的hack失效问题，如gbk编码*/

*font-family: Arial;

width: 500px;

height: 500px;

border: 1px solid #ccc;

}

.img1 {

width: 40px;

height: 40px;

/*设置图片垂直居中*/

vertical-align: middle;

}

.img2 {

width: 80px;

height: 80px;

/*设置图片垂直居中*/

vertical-align: middle;

}

.img3 {

width: 120px;

height: 120px;

/*设置图片垂直居中*/

vertical-align: middle;

}

</style>

</head>

<body>

<div class="line"></div>

<div class="box">

<span>bpdqooo</span>

<img class="img1" src="./home.jpg"/>

<img class="img2" src="./home.jpg"/>

<img class="img3" src="./home.jpg"/>

<span>bpdqooo</span>

</div>

<h3>table-cell实现垂直居中</h3>

<h5>中线</h5>

</body>

</html>

以下是说明：

将class=”box”的div设为display: table-cell，即可实现div内元素的垂直居中

将我的demo用浏览器打开，可以看到我放了3张大小不一的图片，还有两段文字，我们暂且把这些东西看作是一行

好，为什么我要放三张图片呢？

现在我们可以做个实验：

把最大的图片(class=”img3”)设为vertical-align: top

可以看到其他图片和文字均向上偏移，而且第二大的图片(class=”img2”)顶部和img3对齐，这说明，img3的vertical-align属性控制行内其他所占高度更小的元素，并且对img2作用最强

接着上一步，再来做个实验：

把img2设为vertical-align: top

可以看到img1和文字均向上偏移，而且img1顶部和img3对齐，这说明，img2的vertical-align属性控制行内其他所占高度更小的元素，并且对img1作用最强

你是不是似乎明白了什么，同理，若把img设为vertical-align: top，那么两边的文字将会向上偏移，顶部与img1对齐。

结论：

table-cell内的元素，均可视为同一行中

如果只有单行，

该行的高度由最高的元素决定

若对行内某一元素进行设置vertical-align: top，则该属性影响其余高度更小的元素，且对高度最接近的元素作用最强（使之与其顶部对齐）

如果有多行，

Display: table-cell实现img、文字垂直居中的更多相关文章

  1. table表格在设置文字垂直居中后，在表格显示相同排列的数据(比如：testtesttesttsttesttesstestse很多的test)时此表格不能换行

    table设置了垂直居中后在表格显示相同排列的数据(比如:testtesttesttsttesttesstestse很多的test)时此表格不能换行, 此时会导致table会把页面撑的很宽,导致表格后 ...

  2. display:table的几个妙用：垂直居中、浮动……

    一.为什么不用table系表格元素? 目前,在大多数开发环境中,已经基本不用table元素来做网页布局了,取而代之的是div+css,那么为什么不用table系表格元素呢? 1.用DIV+CSS编写出 ...

  3. 垂直居中display:table;

    父级元素 display:table: 子元素 display:table-cell:vertical-align:middle:

  4. div+css使多行文字垂直居中?

    1.单行文字: 设置height = line-height; 多行文字: 设置 padding, 自己要计算一下? vertical-align: 可以设置垂直居中, 但是只是针对本身就具有 ali ...

  5. css实现固定高度及未知高度文字垂直居中的完美解决方案

    在工作当中我们经常碰到类似于"固定高度文字垂直居中及未知高度垂直居中问题",或者 "图片垂直居中问题",而我们最容易会想到使用表格来垂直居中,或者如果是单行文字 ...

  6. [HTML]DIV+CSS 文字垂直居中

    在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊!所以在这里我还要啰嗦两句,CSS中 ...

  7. 文字垂直居中，水平居中 a标签水平居中只要给他的父级设置text-align=center

    在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊!所以在这里我还要啰嗦两句,CSS中 ...

  8. div+css文字垂直居中 解决左侧头像右侧姓名，姓名多换行后相对于头像仍居中显示

    在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊!所以在这里我还要啰嗦两句,CSS中 ...

  9. 多行文字垂直居中（完美兼容chrome firefox IE6 7 8 9）

    在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊!所以在这里我还要啰嗦两句,CSS中 ...

随机推荐

  1. PHP curl https访问问题

    PHP curl https访问问题,原代码: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 /* @String url URL地址  * @Array data P ...

  2. Access字段类型“查阅向导”

    1.显示控件有:“列表框”和“组合框”两种 2.组合框:第一个字段为“填充字段” 3.通过查阅向导建立的会自动添加“关系”(外键),因此在删除或修改字段时需要先删除二者关系,最好不通过“查阅向导”建立 ...

  3. maven依赖本地非repository中的jar包-依赖jar包放在WEB-INF/lib等目录下的情况客户端编译出错的处理

    MAVEN 今天在使用maven编译打包一个web应用的时候,碰到一个问题: 项目在开发是引入了依赖jar包,放在了WEB-INF/lib目录下,并通过buildpath中将web libariary ...

  4. 烂泥：Windows下安装与配置Nginx web服务器

    本文由秀依林枫提供友情赞助,首发于烂泥行天下. 前几篇文章,我们使用nginx都是在linux环境下,今天由于工作的需要.需要在windows环境也使用nginx搭建web服务器. 下面记录下有关ng ...

  5. 启动mysql错误ERROR 2002 (HY000): Can’t connect to local MySQL server through socket ‘/var/lib/mysql/mysql.sock’ (2)

    ERROR 2002 (HY000): Can’t connect to local MySQL server through socket ‘/var/lib/mysql/mysql.sock’ ( ...

  6. netfilter-在内核态操作网络数据包

    一.概述                                                    netfilter是自2.4内核的一个数据包过滤框架.可以过滤数据包,网络地址和端口转换 ...

  7. Spring学习之第一个AOP程序

    IOC和AOP是Spring的两大基石,AOP(面向方面编程),也可称为面向切面编程,是一种编程范式,提供从另一个角度来考虑程序结构从而完善面向对象编程(OOP). 在进行 OOP 开发时,都是基于对 ...

  8. 【2016-10-14】【坚持学习】【Day5】【单例模式】

    今天学习第二个模式:单例模式.只允许系统有一个实例运行,提供全局访问该实例的公共方法. class Singleton { private static Singleton instance=null ...

  9. 分布式系统理论之Quorum机制

    一,Quorum机制介绍 在分布式系统中有个CAP理论,对于P(分区容忍性)而言,是实际存在 从而无法避免的.因为,分布系统中的处理不是在本机,而是网络中的许多机器相互通信,故网络分区.网络通信故障问 ...

  10. ComboBox的数据联动

    实现效果: 点击年级下拉框值时,获取科目下拉框值 一:加载年级下拉框值 GradeDAL层: //检索所有年级名称集合,返回的是泛型集合List<Grade> public List< ...