在文章开头先说明一下此方法的兼容性，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. C# 多线程，论多核时代爱恨情仇

    为什么要学习多线程? 2010年1月21日是10年某市公务员考试的报名截止日.因从下午2点开始,用于报名的北京市人事考试网瘫痪,原定于昨天下午5点截止的报名时间延迟至今天上午11点. 2011年3月1 ...

  2. ZooKeeper之ZAB协议

    ZooKeeper为高可用的一致性协调框架,自然的ZooKeeper也有着一致性算法的实现,ZooKeeper使用的是ZAB协议作为数据一致性的算法,ZAB(ZooKeeper Atomic Broa ...

  3. 烂泥：linux文件同步之rsync学习（一）

    本文由秀依林枫提供友情赞助,首发于烂泥行天下. 这几天刚好有空就打算开始学习linux下的文件同步软件rsync,在学习rsync时,我们可以分以下几个步骤进行: 1. rsync是什么 2. rsy ...

  4. 项目搭建系列之一：使用Maven搭建SpringMVC项目

    约定电脑都安装了eclipse,且已配置好Maven以及eclipse插件. 1.Eclipse 2.maven 3.Eclipse 需要安装maven插件.url:maven - http://do ...

  5. nginx参数说明

    一.nginx的核心配置: >>> 正常运行的必备配置: 1. user username [groupname]; #指定运行worker子进程的用户或组 2. pid /path ...

  6. linux rpm 安装和卸载

    [root@wang Packages]# mount /dev/cdrom /mnt 挂载 [root@wang Packages]# rpm -ivh zip-3.0-1.el6.x86_64.r ...

  7. .Net程序员Python之道---Python基础

    最近对动态语言比较好奇.所以选择了学习Python这门语言.话不多说开始学习笔记. 一. Python 基础: 1. print对Python进行数据输出, #号后面是队友的输出结果, 通过encod ...

  8. 《2016ThoughtWorks技术雷达峰会----变革的原因》

    变革的原因      张松 ,ThoughtWorks中国区总经理 首先回顾IT历史,观点如下: 1.在80,90年代,IT作为一个种生产效率的提高工具,主要是把手工的活动自动化.以client se ...

  9. POJ2230Watchcow[欧拉回路]

    Watchcow Time Limit: 3000MS   Memory Limit: 65536K Total Submissions: 7512   Accepted: 3290   Specia ...

  10. Java深入 - Java 内存分配和回收机制

    Java的GC机制是自动进行的,和c语言有些区别需要程序员自己保证内存的使用和回收. Java的内存分配和回收也主要在Java的堆上进行的,Java的堆中存储了大量的对象实例,所以Java的堆也叫GC ...