css 跨浏览器实现float-center

我们都熟悉 `float:left` 和 `float:right`，它们能够将元素分别浮动至左侧或右侧。那么，你是否曾想过有一个 `float:center` 可以让元素居中浮动呢？

假设我们有以下HTML结构：

```html

```

我们希望 `li` 元素能够浮动并且居中。虽然可以通过设置 `ul` 的 `text-align:center` 和 `li` 的 `display` 来实现居中效果，但这并不是我们想要的浮动居中。为了实现真正的 `float:center`，我们需要重温 `position:relative` 的使用。

`position:relative` 可以使元素相对于其正常位置进行偏移。我们可以先将 `ul` 向左偏移50%，然后再让 `li` 向左浮动，并向右偏移50%或者向左偏移-50%。这样一来， `li` 元素就会像向中间浮动一样实现居中。

以下是相应的CSS代码：

```css

macji {

position: relative;

width: 100%;

height: 80px;

background-color: eee;

text-align: center;

overflow: hidden;

}

macji .macji-skin {

float: left;

position: relative;

left: 50%;

}

macji .macji-skin li {

position: relative;

right: 50%;

float: left;

margin: 10px;

padding: 0 10px;

border: solid 1px 000;

line-height: 60px;

}

```

现在，当我们尝试这种CSS样式时，应该会看到 `li` 元素在 `ul` 中居中对齐，并且实现了居中浮动的效果。这种技术利用了相对定位与浮动的结合，以实现特殊的布局效果。