CSS 内部居中浮动实现(float center)

Pader2009年7月24日 发表于 网页与编程 css 居中 float center

我们都知道及float:left; 和 float:right;,但是否想过 float:center; 呢?

看下面这段代码:

<div class="fpage">
    <ul>
        <li>列表一</li>
        <li>列表二</li>
        <li>列表三</li>
    </ul>
</div>

我们想让 .fpage 内的 li 的整个区域浮动居中显示,这里面的 li 数量未知,ul 的宽度也是未知。当然我们可以让给 .fpage 一个 text-align:center; 但这并不是我们的初衷,很多时候我们必须得使用浮动。
这里我们得先重温一下 position:relative; 它将依据 left, right, top, bottom 等属性在正常文档流中偏移位置。那我们可以让 ul 为position:relative;left:50%,然后再让 li 向左浮动,在让它 position:relative;right:50%(或者left:-50%),那么 li 就有了我们想要的居中浮动效果啦!

CSS:

.fpage {
    position:relative;
    width:100%;
    height:80px;
    background-color:#eee;
    text-align:center;
    overflow:hidden;
}
.fpage ul {
    float:left;
    position:relative;
    left:50%;
    list-style:none;
}
.fpage ul li {
    position:relative;
    right:50%;
    float:left;
    margin:10px;
    padding:0 10px;
    border:solid 1px #000;
    line-height:60px;
}

下载这个实例:[attach=160]

评论 共有 0 条评论

暂无评论,快发表你的评论吧。