首页 > 网页设计 > 元素水平居中的多种实现

元素水平居中的多种实现

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

 

一、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不会兼容它的。

 

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

 

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

 

[html][/html] view plaincopy

  1. <span style="font-family:Microsoft YaHei;font-size:14px;">.pagination {
  2.   float: left;
  3.   width: 100%;
  4.   overflow: hidden;
  5.   position: relative;
  6. }
  7. .pagination ul {
  8.   clear: left;
  9.   float: left;
  10.   position: relative;
  11.   left: 50%;/*整个分页向右边移动宽度的50%*/
  12.   text-align: center;
  13. }
  14. .pagination li {
  15.   line-height: 25px;
  16.   margin: 0 5px;
  17. display: block;
  18.   float: left;
  19.   position: relative;
  20.   right: 50%;/*将每个分页项向左边移动宽度的50%*/
  21. }</span>

 

接下来使用传统的制作方法,我们会让导航浮动到左边,而且每个分页项也进行浮动,就如下图所示一样:

分页导航效果

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

分页导航效果

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

分页导航效果

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

 

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

缺点:实现原理较复杂。


本文固定链接: http://www.devba.com/index.php/archives/2493.html | 开发吧

报歉!评论已关闭.