CODEWITHSUNDEEP
htmlcss
v0idless
v0idless

Reputation: 948

Center content inside a div

I have the following markup. I am trying to have "Previous" all the way to the left, "Next" all the way to the right, and the numbers centered. I can't seem to get the numbers centered.

I tried margin: 0 auto; on .numbers to no avail. The closest I've come was to set the left margin on .numbers to something like 40%, but that seems hackish, because previous and next might not always be there, and there may be more or less than 4 numbers. I'm pretty flexible with the markup and 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>​

And

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

.previous, .numbers {
    float: left;
}

.next {
    float: right;
}

.clear {
    clear: both;
}
​

Upvotes: 0

Views: 68

Answers (2)

Dominik Kirschenhofer
Dominik Kirschenhofer

Reputation: 1205

If you want to use "margin: 0px auto" you also have to set a width for the div.

Upvotes: 1

user228534
user228534

Reputation:

Move div.next to before div.numbers in the markup, don't float .numbers, and apply text-align: center to .numbers.

jSFiddle for those who don't think in css ;)

Upvotes: 2

Related Questions