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ます。

cssで考えない人のためのjSFiddle ;）

Answer 2

「margin：0px auto」を使用する場合は、divの幅も設定する必要があります。