首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > Web前端 >

元素水平居中的多种兑现

2013-09-05 
元素水平居中的多种实现水平居中的实现在写样式中经常会用到。因此简单的记录一下。一、margin和width实现水

元素水平居中的多种实现

水平居中的实现在写样式中经常会用到。因此简单的记录一下。

一、margin和width实现水平居中

第一种方法是最古老的实现方案,也是最常见的方案,在分页容器上定义一个宽度,然后配合margin的左右值为“auto”实现效果。

具体用margin: 0 auto; 或者定义好容器的宽度之后,分别定义margin-left和margin-right均为auto。

优点:实现方法简单易懂,浏览器兼容性强;

缺点:有时候很难确定容器的宽度,因此扩展性差,无法自适应未知项情况。

二、inline-block实现水平居中方法display: inline-block这一属性将对象呈递为内联对象,但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内,允许空格。仅inline-block属性是无法让元素水平居中,他的关键之处要在元素的父容器中设置text-align的属性为“center”,这样才能达到效果:

优点:简单易懂,扩展性强;

缺点:需要额外处理inline-block的浏览器兼容性,貌似奇葩的IE不会兼容它的。

三、浮动实现水平居中的方法

一种听后摸不着头脑看后幡然醒悟的方法。具体代码如下:

现在要想的办法是让分页导航居中的效果了,在这里是通过“position:relative”属性实现,首先在列表项“ul”上向右移动50%(left:50%;),看到如下图所示:

元素水平居中的多种兑现

如上图所示一样,整个分页向右移动了50%的距离,紧接着我们在“li”上也定义“position:relative”属性,但其移动的方向和列表“ul”移动的方向刚好是反方向,而其移动的值保持一致:

元素水平居中的多种兑现

这样一来就实现了float浮动居中的效果。是不是感觉略屌的样子啊?

优点:兼容性强,扩展性强;

缺点:实现原理较复杂。






热点排行