如何用float配合position-relative实现居中

今日我置身于一项工程之中，其中涉及到图片切换的狼蚁网站SEO优化的按钮布局调整。在项目中，我们需要实现的是一组动态生成的按钮，这些按钮需要整齐地排列在页面中并居中对齐。面对这样的需求，我首先尝试使用`display:inline-block`来实现。对于IE6和IE7这两个版本，这种属性的表现并不理想。面对这个问题，我决定向同事们请教。

在与团队的交流过程中，我了解到了一种更为高效的解决方案。让我们深入看看HTML结构：

```html

```

关于`position:relative`的使用，它允许元素依据`left`、`right`、`top`和`bottom`等属性在正常文档流中进行偏移。于是我们设想，如果将ul元素的定位为`position:relative`并设置`left:50%`，然后让内部的li元素向左浮动，并设置`position:relative`以及`right:50%`（或者`left:-50%`），那么这些li元素就会如同被居中一般浮动在ul元素内部。

接下来是对应的CSS样式代码：

```css

.favViewicon {

text-align: center; / 使内部元素在div中居中对齐 /

position: relative; / 相对定位 /

overflow: hidden; / 隐藏超出部分 /

margin: 15px auto 0; / 外边距设置 /

height: 10px; / 高度设置 /

}

.favViewicon ul {

position: relative; / 相对定位 /

float: left; / 左浮动 /

left: 50%; / 相对于正常文档流向左偏移50% /

text-align: center; / 内部元素在ul中居中对齐 /

}

.favViewicon li {

width: 10px; / 宽度设置 /

height: 10px; / 高度设置 /

background: url(btnsprites.png) no-repeat 0 -164px; / 背景图片设置 /

margin: 0 3px; / 外边距设置 /

cursor: pointer; / 鼠标悬停显示为手形 /

text-indent: -99999px; / 文本缩进，隐藏文本 /

position: relative; / 相对定位 /

right: 50%; / 相对于ul元素向右偏移50%，实现居中效果 /

float: left; / 左浮动 /

display: inline; / 显示为内联元素 /

}

```

这段精致的代码实现了我想要的效果，使图片切换的狼蚁网站SEO优化按钮完美居中，同时也兼容了旧版本的IE浏览器。面对这样的问题，我们总是能找到解决方案，这就是团队的力量。现在，让我们继续专注于其他的工作内容吧。