在文章开头先说明一下此方法的兼容性，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. Validation failed for one or more entities. See ‘EntityValidationErrors’解决方法

    Validation failed for one or more entities. See ‘EntityValidationErrors’解决方法 You can extract all the ...

  2. 010 使用netmap API接管网卡，接收数据包，回应ARP请求

    一.本文目的: 上一节中,我们已经在CentOS 6.7 上安装好了netmap,也能接收和发送包了,这节我们来调用netmap中的API,接管网卡,对网卡上收到的数据包做分析,并回应ARP请求. 二 ...

  3. 如何让django方法自动地定期执行

    实现思路:1.首先把需要自动执行的django method写成django command2.将自己定义的django command添加到cron中使用cron服务实现定期执行 Part1 在dj ...

  4. svn使用--all-static编译，移植到其它系统上可能使setlocale等GLIBC相关库函数调用失败

    svn: Can't convert string from 'UTF-8' to native encoding

  5. XSS Payload知识备忘

    参考资料:<白帽子讲Web安全>吴翰清 著 参见: 百度百科 http://baike.baidu.com/view/50325.htm 维基百科 http://zh.wikipedia. ...

  6. LINUX下NFS系统的安装配置

    准备:NFS系统服务器IP 192.168.135.1 ,NFS共享目录/mnt/NFS 一.安装NFS 查看nfs是否安装 #rpm -qa | grep nfs 若没有则安装nfs包 #yum i ...

  7. Google Cloud Platform

    一个离我们很遥远,很遥远的公司.作为全球三大公有云厂商之一,在国内根本听不到他的声音.其实吧,听到了也没用,因为在国内没法用!AWS还在纠结的落地过程中挣扎,GCP基本上就当不存在吧. 抛开这些乌烟瘴 ...

  8. MMORPG大型游戏设计与开发（客户端架构）

    首先为所有等待的朋友说一声歉意,实在让大家等的太久.客户端的设计本来就是一个大的工程,而且工作的关系,也没有太多时间在这方面做研究.不过在私下有空的时间,我还是继续着这方面的研究,很遗憾没有用期望的o ...

  9. DPM（voc-release5） Matlab模型文件 Mat转XML

    (转载请注明作者和出处 楼燚(yì)航的blog :http://www.cnblogs.com/louyihang loves baiyan/ 未经允许请勿用于商业用途) 由于目前DPM模型训练的代 ...

  10. linux下安装python

    在Linux下安装Python的操作相当简单,按如下步骤操作即可: 命令: wget https://www.python.org/ftp/python/3.5.2/Python-3.5.2.tgzt ...