css 跨浏览器实现float:center

CSS 实现跨浏览器的 float: center布局攻略

1. 实现原理

float: center 的实现原理是通过利用 text-align 和 display 属性来完成。首先我们需要将要水平居中的元素转化为行内块级元素，并且将其外层元素设置为 text-align: center；然后再通过子元素的 margin 取值来实现元素的居中对齐。

2. 实现步骤

1. 将要水平居中的元素设置为行内块级元素。

.center {
  display: inline-block;
}

1. 将要居中的元素所在的外层元素设置为 text-align: center。

.wrapper {
  text-align: center;
}

1. 通过 margin 来实现元素的居中对齐。

.center {
  margin: 0 auto;
}

3. 跨浏览器兼容性实现

1. 在 IE6 中需要设置外层元素的 display 属性为 inline，具体实现方式如下：

.wrapper {
  text-align: center;
  display: inline;
  zoom: 1;
}

1. 如果要支持 IE6，我们还需要为居中元素设置浮动，具体实现方式如下：

.center {
  float:none;
  margin:0 auto;
  display:inline-block;
  *display:inline;
  zoom:1;
}

4. 示例说明

示例一

以下是一个简单的 div 居中布局示例：

<div class="wrapper">
  <div class="center">这是要居中的内容</div>
</div>

.wrapper{
  text-align:center;
}
.center{
  display:inline-block;
  margin:0 auto;
}

通过将 .center 元素设置为行内块级元素，再通过 margin 自定义元素的边距，最后将其外层元素设置为 text-align: center，就可以实现居中布局。

示例二

以下是一个兼容 IE6 的 div 居中布局示例：

<div class="wrapper">
  <div class="center">这是要居中的内容</div>
</div>

.wrapper{
  text-align:center;
  display:inline;
  zoom:1;
}
.center{
  float:none;
  margin:0 auto;
  display:inline-block;
  *display:inline;
  zoom:1;
}

通过将 .center 元素设置为浮动，并将其外层元素设置为 inline，并设置 zoom:1 触发 IE6 的 hasLayout 属性，就可以实现浮动布局并兼容 IE6。