Display: table-cell实现img、文字垂直居中
在文章开头先说明一下此方法的兼容性,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、文字垂直居中的更多相关文章
- table表格在设置文字垂直居中后,在表格显示相同排列的数据(比如:testtesttesttsttesttesstestse很多的test)时此表格不能换行
table设置了垂直居中后在表格显示相同排列的数据(比如:testtesttesttsttesttesstestse很多的test)时此表格不能换行, 此时会导致table会把页面撑的很宽,导致表格后 ...
- display:table的几个妙用:垂直居中、浮动……
一.为什么不用table系表格元素? 目前,在大多数开发环境中,已经基本不用table元素来做网页布局了,取而代之的是div+css,那么为什么不用table系表格元素呢? 1.用DIV+CSS编写出 ...
- 垂直居中display:table;
父级元素 display:table: 子元素 display:table-cell:vertical-align:middle:
- div+css使多行文字垂直居中?
1.单行文字: 设置height = line-height; 多行文字: 设置 padding, 自己要计算一下? vertical-align: 可以设置垂直居中, 但是只是针对本身就具有 ali ...
- css实现固定高度及未知高度文字垂直居中的完美解决方案
在工作当中我们经常碰到类似于"固定高度文字垂直居中及未知高度垂直居中问题",或者 "图片垂直居中问题",而我们最容易会想到使用表格来垂直居中,或者如果是单行文字 ...
- [HTML]DIV+CSS 文字垂直居中
在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊!所以在这里我还要啰嗦两句,CSS中 ...
- 文字垂直居中,水平居中 a标签水平居中只要给他的父级设置text-align=center
在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊!所以在这里我还要啰嗦两句,CSS中 ...
- div+css文字垂直居中 解决左侧头像右侧姓名,姓名多换行后相对于头像仍居中显示
在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊!所以在这里我还要啰嗦两句,CSS中 ...
- 多行文字垂直居中(完美兼容chrome firefox IE6 7 8 9)
在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊!所以在这里我还要啰嗦两句,CSS中 ...
随机推荐
- C# 多线程,论多核时代爱恨情仇
为什么要学习多线程? 2010年1月21日是10年某市公务员考试的报名截止日.因从下午2点开始,用于报名的北京市人事考试网瘫痪,原定于昨天下午5点截止的报名时间延迟至今天上午11点. 2011年3月1 ...
- ZooKeeper之ZAB协议
ZooKeeper为高可用的一致性协调框架,自然的ZooKeeper也有着一致性算法的实现,ZooKeeper使用的是ZAB协议作为数据一致性的算法,ZAB(ZooKeeper Atomic Broa ...
- 烂泥:linux文件同步之rsync学习(一)
本文由秀依林枫提供友情赞助,首发于烂泥行天下. 这几天刚好有空就打算开始学习linux下的文件同步软件rsync,在学习rsync时,我们可以分以下几个步骤进行: 1. rsync是什么 2. rsy ...
- 项目搭建系列之一:使用Maven搭建SpringMVC项目
约定电脑都安装了eclipse,且已配置好Maven以及eclipse插件. 1.Eclipse 2.maven 3.Eclipse 需要安装maven插件.url:maven - http://do ...
- nginx参数说明
一.nginx的核心配置: >>> 正常运行的必备配置: 1. user username [groupname]; #指定运行worker子进程的用户或组 2. pid /path ...
- linux rpm 安装和卸载
[root@wang Packages]# mount /dev/cdrom /mnt 挂载 [root@wang Packages]# rpm -ivh zip-3.0-1.el6.x86_64.r ...
- .Net程序员Python之道---Python基础
最近对动态语言比较好奇.所以选择了学习Python这门语言.话不多说开始学习笔记. 一. Python 基础: 1. print对Python进行数据输出, #号后面是队友的输出结果, 通过encod ...
- 《2016ThoughtWorks技术雷达峰会----变革的原因》
变革的原因 张松 ,ThoughtWorks中国区总经理 首先回顾IT历史,观点如下: 1.在80,90年代,IT作为一个种生产效率的提高工具,主要是把手工的活动自动化.以client se ...
- POJ2230Watchcow[欧拉回路]
Watchcow Time Limit: 3000MS Memory Limit: 65536K Total Submissions: 7512 Accepted: 3290 Specia ...
- Java深入 - Java 内存分配和回收机制
Java的GC机制是自动进行的,和c语言有些区别需要程序员自己保证内存的使用和回收. Java的内存分配和回收也主要在Java的堆上进行的,Java的堆中存储了大量的对象实例,所以Java的堆也叫GC ...