div内的中心内容

Question

我有以下标记。我试图将“Previous”一直向左，“Next”一直向右，数字居中。我似乎无法将数字集中在一起。

我在margin: 0 auto;上尝试了.numbers无济于事。我最接近的是将.numbers上的左边距设置为40％左右，但这似乎是hackish，因为上一个和下一个可能并不总是存在，并且可能有多于或少于4个数字。我对标记和CSS非常灵活。

http://jsfiddle.net/dcsUc/15/

<div id="content">
    <div class="pagination">
        <div class="previous">Previous</div>
        <div class="numbers">
            <a href="#">1</a>
            <a href="#">2</a>
            <a href="#">3</a>
            <a href="#">4</a>
        </div>
        <div class="next">Next</div>
        <div class="clear"></div>
    </div>
</div>​

和

#content {
    width: 100%;
    border: 1px solid #000;
}

.previous, .numbers {
    float: left;
}

.next {
    float: right;
}

.clear {
    clear: both;
}
​

Answer 1

将div.next移至标记中的div.numbers之前，不要浮动.numbers，并将text-align: center应用于.numbers。

jSFiddle对于那些不在css中思考的人;）

Answer 2

如果你想使用“margin：0px auto”，你还必须设置div的宽度。