html - 将内容居中放在 div 中

Question

我有以下标记。我试图让“上一个”一直到左边，“下一个”一直到右边，数字居中。我似乎无法让数字居中。

我试margin: 0 auto;了.numbers没用。我最接近的方法是将左边距设置为.numbers40% 左右，但这似乎很骇人听闻，因为上一个和下一个可能并不总是存在，并且可能多于或少于 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 设置宽度。