【推荐】未知尺寸元素水平垂直居中终解(支持所有浏览器,简单好用)
2016-11-30 00:00
411 查看
摘要: 该未知尺寸元素水平垂直居中方案基于 inline-block 元素的 vertical-align:middle 特性实现,在这里需要对 line box 及 vertical-align 的应用情况有一定的了解
Figure 1: 水平居中知识点
对于水平居中可能不需要太多的介绍,所有主流浏览器均支持 text-align 属性,只需要取值 center 即可。
Figure 2: vertical-align 知识点
vertical-align 适用于 inline level, inline-block level 及 table-cells 元素上。
所有主流浏览器均支持 vertical-align 属性,所以使用该属性来实现垂直居中是一个不错的想法;
Figure 3: table方式实现
所有主浏览器均支持;如果使用table来实现垂直居中,则你只需要如上即可,不论你的td设置为多高,里面的内容均会垂直居中,因为单元格默认就是 vertical-align:middle 的。
Figure 4: display:table-cell实现
既然table能实现,自然也就会想到将 display 设置为table系value来实现。当然,该方案是有局限性的,因为IE8以下的浏览器不支持 display 的table系value,所以你只能在IE8及以上浏览器以及非IE浏览器下才能看到效果。
Figure 5: inline-block实现
首先要了解垂直方向的对齐排版需使用 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
由于IE8以下浏览器不支持伪对象 ::after,于是我们通过IE条件注释为IE8以下浏览器新增一个额外元素span,其作用等同 inline-block #5 中的 ::after。本例支持所有主浏览器。
Figure 7: inline-block实现可能会碰到的杯具
其实如果理解了line box概念,写上述2个例子时,就肯定知道会存在这个杯具。如上,CSS不变,只将文本变长。之前得以实现垂直居中,主要是将文本所在line box撑高了,而如果新增的元素被过长文本挤换行,则它们将不再处于同一line box,那么垂直居中将失效。你可能存疑,不是已将新增元素width设置为0了吗?怎么还能被挤换行。这时你应该知道一个常识,inline level或inline-block level的元素之间的间隙问题,对此问题不做详述,看看 @一丝 的这篇文章 inline-block 前世今生,应该能有个理性的认知。
Figure 8: inline-block终解
这里只是相应简单的处理了一下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; 即可保证子元素的内容正常换行 。终解代码如下:
或者整理成通用的解决样式:
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; }
相关文章推荐
- IE6+未知尺寸元素水平垂直居中
- 未知尺寸元素水平垂直居中:
- 纯css实现未知尺寸图片在DIV中垂直水平居中(超简单)
- 单个方框内图片垂直水平居中和等比例缩小(支持所有浏览器)
- css 未知尺寸元素水平垂直居中(只针对inline,inline-block,table-cells)
- 使元素垂直水平居中与浏览器窗口
- 元素水平居中和垂直居中的几种简单方法
- 未知高度宽度元素垂直水平居中
- 纯js代码实现未知宽高的元素在指定元素中垂直水平居中显示
- 未知宽高元素水平垂直居中
- 未知宽高元素水平垂直居中方法
- 如何让未知尺寸的图片、单行文本、多行文本水平垂直居中?
- 使用纯CSS实现未知尺寸的图片(但高宽都小于200px)在200px的正方形容器中水平和垂直居中。
- 未知宽高的img元素水平垂直居中显示
- 未知尺寸图片在固定高度容器中的水平和垂直居中
- css系列(布局):实现一个元素在浏览器中水平、垂直居中的几个方案
- 未知宽高元素垂直水平居中
- 纯js代码实现未知宽高的元素在指定元素中垂直水平居中显示
- 实现未知尺寸的图片在固定区域内水平、垂直居中
- 未知尺寸图片在已知尺寸容器下的水平垂直居中