文档章节

【推荐】未知尺寸元素水平垂直居中终解(支持所有浏览器,简单好用)

山哥
 山哥
发布于 2016/11/30 17:13
字数 1661
阅读 57
收藏 1

Figure 1: 水平居中知识点

text-align:center

对于水平居中可能不需要太多的介绍,所有主流浏览器均支持 text-align 属性,只需要取值 center 即可。

Figure 2: vertical-align 知识点

vertical-align: top|middle|bottom

vertical-align 适用于 inline level, inline-block level 及 table-cells 元素上。
所有主流浏览器均支持 vertical-align 属性,所以使用该属性来实现垂直居中是一个不错的想法;

Figure 3: table方式实现

<table>
	<tbody>
		<tr>
			<td>水平垂直居中的随意内容</td>
			<td>水平垂直居中的随意内容</td>
		</tr>
	</tbody>
</table>

所有主浏览器均支持;如果使用table来实现垂直居中,则你只需要如上即可,不论你的td设置为多高,里面的内容均会垂直居中,因为单元格默认就是 vertical-align:middle 的。

Figure 4: display:table-cell实现

<div id="demo">
	<p>水平垂直居中的随意内容</p>
</div>
#demo{
	display:table;
	width:500px;
	margin:10px auto;
	background:#eee;
}
#demo p{
	display:table-cell;
	height:100px;
	vertical-align:middle;
}

既然table能实现,自然也就会想到将 display 设置为table系value来实现。当然,该方案是有局限性的,因为IE8以下的浏览器不支持 display 的table系value,所以你只能在IE8及以上浏览器以及非IE浏览器下才能看到效果。

Figure 5: inline-block实现

<div id="demo">
	<p>水平垂直居中的随意内容</p>
</div>
#demo{
	height:100px;
	text-align:center;
}
#demo:after{
	display:inline-block;
	width:0;
	height:100%;
	vertical-align:middle;
	content:'';
}
#demo p{
	display:inline-block;
	vertical-align:middle;
}

首先要了解垂直方向的对齐排版需使用 vertical-align #2,并且只应用于inline level, inline-block level 及 table-cells 元素上;其次 vertical-align 的对齐就基于每个 line box(行框) 的,简单的说,inline level元素按照 Normal flow 水平排版出一行就会形成一个line box,其高度由内容形成,如果换行,则又是另一个line box,所有一段文本可能会分布在多个line box里,这些不重叠的line box被称作为a vertical stack of line boxes(一个垂直堆叠的线框集合)这些。
换句话说,我们的垂直居中是要在每个line box中进行处理。而上例中我们想让一行文本在名叫demo的高100px的容器里垂直居中,这时有个问题就是demo容器并非该行文本的line box,所以就算定义vertical-laign为middle也无法让该行文本在demo容器中垂直居中。我们知道line box的高度是由内容形成的,这时我们可以额外创建一个与该行文本处于同一line box的元素,同时将新增元素的高度定义为与demo容器相同,此时line box的高度将与demo一致,文本将会在line box内垂直居中,即同样实现了在demo容器中垂直居中。本例我们使用伪对象::after来创建那个新增元素,可以设置新增元素为不可见。
当然,该方案也是有局限性的,因为IE8以下的浏览器不支持伪对象 ::after 。

Figure 6: inline-block实现2

<div id="demo">
	<p>水平垂直居中的随意内容</p>
	<!--[if lt IE 8]><span></span><![endif]-->
</div>
#demo{
	height:100px;
	text-align:center;
}
#demo:after,#demo span{
	display:inline-block;
	*display:inline;
	*zoom:1;
	width:0;
	height:100%;
	vertical-align:middle;
}
#demo:after{
	content:'';
}
#demo p{
	display:inline-block;
	*display:inline;
	*zoom:1;
	vertical-align:middle;
}

由于IE8以下浏览器不支持伪对象 ::after,于是我们通过IE条件注释为IE8以下浏览器新增一个额外元素span,其作用等同 inline-block #5 中的 ::after。本例支持所有主浏览器。

Figure 7: inline-block实现可能会碰到的杯具

<div id="demo">
	<p>这是一个失败的水平垂直居中实例</p>
	<!--[if lt IE 8]><span></span><![endif]-->
</div>

其实如果理解了line box概念,写上述2个例子时,就肯定知道会存在这个杯具。如上,CSS不变,只将文本变长。之前得以实现垂直居中,主要是将文本所在line box撑高了,而如果新增的元素被过长文本挤换行,则它们将不再处于同一line box,那么垂直居中将失效。你可能存疑,不是已将新增元素width设置为0了吗?怎么还能被挤换行。这时你应该知道一个常识,inline level或inline-block level的元素之间的间隙问题,对此问题不做详述,看看 @一丝 的这篇文章 inline-block 前世今生,应该能有个理性的认知。

Figure 8: inline-block终解

<div id="demo">
	<p>这是一个终极实现的水平垂直居中实例</p>
	<!--[if lt IE 8]><span></span><![endif]-->
</div>
#demo{
	height:100px;
	text-align:center;
	font-size:0;
}
#demo:after,#demo span{
	display:inline-block;
	*display:inline;
	*zoom:1;
	width:0;
	height:100%;
	vertical-align:middle;
}
#demo:after{
	content:'';
}
#demo p{
	display:inline-block;
	*display:inline;
	*zoom:1;
	vertical-align:middle;
	font-size:16px;
}

这里只是相应简单的处理了一下inline-block的间隙,可以搞定目前所有的主浏览器,特殊情况的话,可以处理的更精细些。但该原理是 inline-block 实现原理的终解。

Figure 9: 附加一个我的 inline-block 终解2

Figure8 的终解中,使用了 font-size:0 来解决 inline-block 默认间距造成最后一个占位元素被换行问题,但是这样有一个弊端:由于父元素设置了 font-size:0,因此子元素内容必须重新定义 font-size,不利于全局的 font-size 定义。

对于这个问题其实只要保证占位元素不被换行即可,只要简单的在父元素上设置 white-space:nowrap; 样式定义,即可保证其 inline-block 子元素始终排成一排而不换行,而只需在子元素设置 white-space:normal; 即可保证子元素的内容正常换行 。终解代码如下:

<div id="demo">
	<p>这是一个终极实现的水平垂直居中实例</p>
	<!--[if lt IE 8]><span></span><![endif]-->
</div>
#demo{
	height:100px;
	white-space:nowrap;
}
#demo:after, #demo span{
	display:inline-block;
	*display:inline;
	*zoom:1;
	width:0;
	height:100%;
	vertical-align:middle;
}
#demo:after{
	content:'';
}
#demo p{
	display:inline-block;
	*display:inline;
	*zoom:1;
	vertical-align:middle;
	white-space:normal;
}

或者整理成通用的解决样式:

<div id="demo">
	<p class="inline">这是一个终极实现的水平垂直居中实例</p>
	<span class="_vm_actor"></span>
</div>
/* .inline 和 ._vm_actor 样式可以作为通用的 */
.inline, ._vm_actor {
	display:inline-block;
	*display:inline;
	*zoom:1;
	vertical-align:middle;
}
._vm_actor {
	width:0;
	height:100%;
	font-size:0;
	padding:0;
	margin:0;
}

#demo{
	height:100px;
	white-space:nowrap;
}
#demo p{
	white-space:normal;
}

 

本文转载自:http://demo.doyoe.com/css/alignment/

共有 人打赏支持
山哥

山哥

粉丝 245
博文 351
码字总数 136465
作品 0
南京
程序员
私信 提问
css实现水平居中和垂直居中及其浏览器兼容性

不管是在网站的布局还是显示图片,需要水平居中和垂直居中的情况是很常见的。今天我们就开始对css的水平居中和垂直居中的一些常见方法在各种浏览器下进行测试和归纳。 浏览器说明:本文涉及到...

黄梦巍
2013/08/08
0
0
Flexbox 布局 与 常见布局需求实现对比

Flexbox 布局是 CSS 3 新增的布局模式,在 display 中的值是 。flex 具有很好的适应性,在电脑浏览器和手机浏览器中都有很好的表现。虽然其标准仍然是“候选(CR)”,但是在各个浏览器已经得...

黄金林
2016/12/21
25
0
css之技巧和经验

说明:本文档兼容性测试基础环境为:windows系统;IE6-10, Firefox4-17, Chrome16-23, Win Safari5.1.7, Opera11.5-12.5 CSS技巧和经验列表(*以下实例默认运行环境都为Standard mode): 如...

假行僧396741
2017/01/14
0
0
前端知识点乱炖之一(HTML/CSS)

前面面试知识总结之HTML/css篇 1.行内元素、块级元素和空(void)元素有哪些? 行内元素:a 、b、span、img、input、strong、select、label、em、button、textarea。 块级元素:div、ul、li、...

w-rain
2016/03/23
61
0
关于CSS制作水平/垂直居中对齐问题

作为前端开发者,在制作Web页面时都有碰到CSS制作水平垂直居中的问题,我想大家都有研究过或者写过,特别是其中的垂直居中,更是让人烦恼。这段时间,我收集了几种不同的方式制作水平/垂直居...

ACE-705
2014/05/07
0
0

没有更多内容

加载失败,请刷新页面

加载更多

git 常用命令

本文档适合有一定git使用基础的用户,当使用时忘记使用命令可以起参考作用,新手请移步其他详细教程 下载安装 下载git完成之后,配置用户 $ git config --global user.name "Your Name"$ g...

杨鹏飞乀
8分钟前
1
0
返回历史页面,并刷新该历史页面

原来 还真的有 可以 返回历史 上一个页面,并刷新历史页面的 API的, 之前以为没有,所以只能每次返回 上一个页面的时候,都是直接 写上了 该页面的路径, 也就是直接去访问了。 而document....

之渊
11分钟前
0
0
MaxCompute新功能发布

2018年Q3 MaxCompute重磅发布了一系列新功能。 本文对主要新功能和增强功能进行了概述。 实时交互式查询:Lightning on MaxCompute 生态兼容:Spark on MaxCompute New SQL 新特性发布 Pyth...

阿里云云栖社区
12分钟前
1
0
PHP实现excel导入

1、前端写法 <input type="file" name="myfile" id="uploadingFiles" value="上传excel文件" /> <input type="text" name="mode" id="uploadingmode" value="" /> <button id="determin" cl......

葬-花
12分钟前
0
0
SpringBoot打jar包或war包获取不到资源文件解决办法

问题描述 在开发过程中我们经常会碰到要在代码中获取资源文件的情况,而我在最近将原有的Tomcat的原生项目迁移到SpringBoot项目中时碰到一个问题,就是在本地运行时,获取本地的xml资源文件是...

不学无数的程序员
18分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部