在文章开头先说明一下此方法的兼容性，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. 小说一下case ~

    case 这个关键词,用的地方不少~大部分的用途都通过以下的方式去应用 SELECT CASE @i END AS 测试1; 测试1 ----------- DECLARE @Hour INT = D ...

  2. iOS播放铃声及震动，适用于扫描、新消息等

    iOS播放铃声或者设置震动实现:   铃声:     SystemSoundID soundID = 1007;     AudioServicesPlaySystemSound(soundID); ...

  3. ubuntu下eclipse scala开发插件（Scala IDE for Eclipse）安装

    1. 环境介绍 系统:ubuntu16.04(不过和系统版本关系不大) elipse:Neon.1aRelease (4.6.1) 2. 插件介绍 Scala IDE for eclipse是elip ...

  4. nginx有关.htaccess小结

    可能很多朋友都常用nginx不支持.htaccess,只有apache才支持.htaccess文件,其实这是错误的看法nginx也是支持.hatccess的哦. 其实nginx和.htaccess一点 ...

  5. IE6-9不支持Textarea的maxlength属性

    给textarea标签添加一个maxlength=200,测试工程师提bug说IE9没起作用.后一测试,发现IE10一下的浏览器均不支持 <textarea maxlength="20 ...

  6. TCP校验和的原理和实现

        http://blog.csdn.net/zhangskd/article/details/11770647 分类: Linux TCP/IP Linux Kernel 2013-09-24 ...

  7. Android adb push 和 pull操作

    由于安卓真机本地调试时,每次启动并生成apk然后安装到设备比较费时,而很多情况是仅仅修改了hot 脚本文件(cocos2dx + lua). 所以,使用热更机制把修改后的lua文件push到热更目录( ...

  8. 虚拟机群安装多个hadoop集群时遇到的问题

    背景,原来在我的虚拟机集群(nn1,nn2)中安装的是cdh23502,后来做升级实验,升到cdh26550,因为生产中使用的环境是cdh23502,所以再次切换回去. 切换的过程中,遇到一些问题,特 ...

  9. Notes on <Assembly Language step by step>

    By brant-ruan Yeah, I feel very happy When you want to give up, think why you have held on so long. ...

  10. C++ 之 重载赋值操作符

    Widget 类中,定义了一个 Bitmap 类型的私有数据成员 -- pb 指针 class Bitmap { ... }; class Widget { private: Bitmap *pb; ...