在网页布局设计中，居中对齐是一种常见的需求。针对IE6和IE7浏览器的兼容性问题，我们经常需要寻找有效的解决方案。在这个场景下，`float`与`position:relative`结合使用可以达到预期的居中效果，而避免使用对这些老版本IE浏览器支持不理想的`display:inline-block`。以下我们将详细探讨这种实现方法。
我们了解`float`属性。`float`主要用于创建浮动元素，允许元素在页面上左右移动，以便其他内容环绕它。在本例中，我们利用`float:left`使`.favViewicon ul`中的`li`元素向左浮动。
然后，`position:relative`属性允许我们相对元素原本的位置进行定位。通过设置`left`或`right`属性，我们可以使元素在水平方向上偏移。当设置`left:50%`时，元素会向左偏移其自身宽度的一半，这样就相当于将元素的中心点移动到了父元素的左边边缘。
接着，为了进一步实现居中，我们需要对`li`元素使用`position:relative`并设置`right:50%`（或`left:-50%`）。这会使得每个`li`元素向右偏移自身宽度的一半，相当于将其右边边缘移动到父元素的中心线。由于`li`已经向左浮动，此时实际上它就位于父元素的中心了。
HTML结构如下：
```html
<div class="favViewicon">
<ul class="clearfix">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
```
CSS样式如下：
```css
.favViewicon {
text-align: center;
position: relative;
overflow: hidden;
margin: 15px auto 0;
height: 10px;
}
.favViewicon ul {
position: relative;
float: left;
left: 50%;
text-align: center;
}
.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%;
float: left;
display: inline;
}
```
这段代码的关键在于`.favViewicon ul`的`left:50%`和`.favViewicon li`的`right:50%`。它们共同作用，使子元素在父元素中居中。`overflow:hidden`是为了处理可能的浮动溢出问题，`text-align:center`则是为了确保行内元素在父容器内部水平居中。
总结来说，通过巧妙地结合`float`和`position:relative`，我们能够有效地解决IE6和IE7浏览器中元素居中对齐的问题，而无需使用可能导致兼容性问题的`display:inline-block`。这种方法虽然在某些情况下可能需要额外的CSS调整，但不失为一种实用的跨浏览器解决方案。
