IE6+未知尺寸元素水平垂直居中
首先讨论在IE8以上(也就是支持伪元素after的基础上)的2种情况
当有一段不知道长度大小的文字在你面前,你需要使它垂直居中的时候,你肯定会想到:
1、text-align:center;水平居中没错。
2、垂直居中,可以使用绝对定位,margin-left,margin-top负值在这里可以实现吗?答案是不可以,因为文字多少你不知道。那么绝对定位就不好使了。
3、还有人应该想到line-height:;这种情况下但是如果这个文字换行了呢?所以也不行。
那么接下来就是要说的这个问题了,使用display:inline-block;可以实现兼容IE6以上。
那么什么是display:inline-block;?我们来了解了解。。。
早在 IE 5.5 就开始支持 inline-block了,同时我们知道 IE6、7 中 display:inline-block 是可以触发 hasLayout 的,触发了 hasLayout 的元素表现出来的特征就是一个独立的矩形容器,可以设置宽高而且不受外部元素的影响。
:inline-block 后的元素创建了一个行级的块容器,该元素内部(内容)被格式化成一个块元素,同时元素本身则被格式化成一个行内元素。直白一点的意思就是:inline-block 的元素既具有 block 元素可以设置宽高的特性,同时又具有 inline 元素默认不换行的特性。当然不仅仅是这些特性,比如 inline-block 元素也可以设置 vertical-align 属性。简而言之: inline-block 后的元素就是一个格式化为行内元素的块容器( Block container )
请看IE8以上使行内元素垂直居中的效果。。。
我是一段未知大小的文字。
代码如下:
当元素发生换行之后,应该这样处理。。。
我是一段未知大小的文字。如果我是一个长文本的话,会发生什么呢?
代码如下:
为什么要这样处理呢?你应该想到,既然是换行了,那就是说明我的这个伪元素after和这段文字不在一个line box里了,应该被挤下去了,如图:
有人肯定也已经发现,width已经被设置为0了,应该不会被挤下去啊?这就涉及到了inline-block使元素之间产生间隙,而IE6、7,IE8(Q)中:inline 元素会产生空隙,block 元素不会产生空隙。也就是说,因为这个间隙的存在,就把我这个伪元素参照物给挤下去了。
在我们这里的处理是,将父级的字体设置为0,将元素的字体设置为正常,就可以去除inline-block产生的间隙。
产生间隙的根本原因是:HTML 中的换行符、空格符、制表符等产生了空白符,而这些归根结底都是字符,那么它们的大小都是受 font-size 来控制的,字体大小直接导致 inline 或者 inline-block 后元素之间空隙的大小,把 inline-block 元素间的空隙认为总是某个固定大小是错误的。
这只是在IE8以上的浏览器上,但是,IE8 以上支持 font-size:0; IE6、7 inline 元素 inline-block 后设置 font-size:0 始终有 1px 的空隙。这里就要用到letter-spacing 和 word-spacing了。
letter-spacing : normal | length (检索或设置对象中的文字之间的间隔)
word-spacing : normal | length(检索或设置对象中的单词之间插入的空隔)
Safari 中 letter-spacing 负值的绝对值大于空隙大小后,内部会发生重叠。而word-spacing不会。那就好办了。
去除 inline-block 空隙终极解决方案
解决了inline-block的间隙问题,接着前面说的IE8及以下不支持伪元素的办法,我们可以在元素p后设置一个隐藏的span来当作参照物即可。
这是一段很长的文字,但不知道大小,又换行了,还是在IE8及以下的情况。IE8及以下才能看见居中。可以看到span标签只是个参照物,将line box的高度撑为100%。
代码如下:
终极代码:

参考
未知尺寸元素水平垂直居中
inline-block 前世今生
IE6+未知尺寸元素水平垂直居中的更多相关文章
- Middle-help 终极实现元素水平垂直居中
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
- CSS未知宽高元素水平垂直居中
方法一 :table.cell-table 思路:显示设置父元素为:table,子元素为:cell-table,这样就可以使用vertical-align: center,实现水平居中优点:父元素(p ...
- css中元素水平垂直居中4种方法介绍
table-cell轻松设置文本图片水平垂直居中 让一个元素垂直居中的思路:把这个元素的容器设置为table-cell,也就是具有表格单元格的特性,再使用vertical-align(这个属性对blo ...
- 【Web】CSS实现绝对定位元素水平垂直居中
网页中常常需用让绝对定位元素水平垂直居中,下面介绍2种方法: 一 元素宽度未知 <!DOCTYPE html> <html lang="en"> <h ...
- CSS元素水平垂直居中方法总结(主要对大漠以及张鑫旭博客所述方法进行了归纳)
本文主要是对主流居中方法进行了归纳,有些地方甚至就是把别人的代码直接复制过来的,没有什么自己的东西,除了大漠以及张鑫旭的方法外,还有来自司徒正美.怿飞博客的几个方法 以下方法,由于测试环境的原因,IE ...
- CSS元素水平垂直居中的方法
1. 元素水平居中 1.1 设置父元素的属性 text-align: center; 说明:此属性只针对父元素的子元素为内联元素时有效,比如:img,input,select,button等(行内 ...
- CSS布局:元素水平垂直居中
CSS布局:元素水平垂直居中 本文将依次介绍在不同条件下实现水平垂直居中的多种方法 水平垂直居中是在写网页时经常会用到的需求,在上两篇博客中,分别介绍了水平居中和垂直居中的方法.本文的水平垂直居中就是 ...
- 05. flex元素水平垂直居中(三种position水平垂直居中和两种新老版本水平垂直居中)
flex元素水平垂直居中(三种position水平垂直居中和两种新老版本水平垂直居中) (1).position : <!DOCTYPE html> <html lang=" ...
- css 实现元素水平垂直居中总结5中方法
个人总结,如有错误请指出,有好的建议请留言.o(^▽^)o 一.margin:0 auto:text-align:center:line-height方法 <div id="divAu ...
随机推荐
- 高性能Javascript--脚本的无阻塞加载策略
Javascript在浏览器中的性能,可以说是前端开发者所要面对的最重要的可用性问题. 在Yahoo的Yslow23条规则当中,其中一条是将JS放在底部 .原因是,事实上,大多数浏览器使用单进程处理U ...
- C# - 值类型、引用类型&走出误区,容易错误的说法
1. 值类型与引用类型小总结 1)对于引用类型的表达式(如一个变量),它的值是一个引用,而非对象. 2)引用就像URL,是允许你访问真实信息的一小片数据. 3)对于值类型的表达式,它的值是实际的数据. ...
- Windows下Visual studio 2013 编译 Audacity
编译的Audacity版本为2.1.2,由于实在windows下编译,其源代码可以从Github上取得 git clone https://github.com/audacity/audacity. ...
- C#泛型详解(转)
初步理解泛型: http://www.cnblogs.com/wilber2013/p/4291435.html 泛型中的类型约束和类型推断 http://www.cnblogs.com/wilber ...
- 使用Git Bash远程添加分支和简单部署你的静态页面
新建一个分支:git branch mybranch(mybranch你的分支名字) 切换到你的新分支: git checkout mybranch 将新分支发布在github上: git push ...
- 【干货分享】流程DEMO-资产请购单
流程名: 资产请购 业务描述: 流程发起时,会检查预算,如果预算不够,流程必须经过总裁审批,如果预算够用,将发起流程,同时占用相应金额的预算,但撤销流程会释放相应金额的预算. 流程相关文件: 流程 ...
- 满堂红CIO邓劲翔:房屋中介突围
人脸识别.客户关系管理进度监控.业务流程实时监控.网站访问人数及流量实时监控等实际企业应用场景淋漓尽致.羽羽如生的以大屏幕上图表形式展现在人们面前,如果你不去继续询问,你不会知道这是一家才刚刚在房地产 ...
- KOTLIN开发语言文档(官方文档) -- 2.基本概念
网页链接:https://kotlinlang.org/docs/reference/basic-types.html 2. 基本概念 2.1. 基本类型 从可以在任何变量处理调用成员函数和属性 ...
- Linux下用netstat查看网络状态、端口状态(转)
转:http://blog.csdn.net/guodongdongnumber1/article/details/11383019 在linux一般使用netstat 来查看系统端口使用情况步. ...
- Apache2.4:AH01630 client denied by server configuration
问题说明:Apache服务总共有4个,是为了防止单点故障和负载均衡,负载均衡控制由局方的F5提供. 访问的内容在NAS存储上,现象是直接访问每个apache的服务内容都是没有问题,但是从负载地址过来的 ...