View Full Version : Horizontal centering inside div

08-24-2005, 04:12 PM
Tricky question for ya: I have a result box after a search displaying the number of pages for easy access. The number of pages will change depending on how many results you get, and there are previous and next buttons on each side - like this:

<previous |1 2 3 4 5 6| next>

With tables, this would be a breeze. With divs, not so easy. Or rather, it IS easy up to a point - centering the 1 2 3 etc divs. Yeah, they do have to be divs. So far I've got three boxes floated next to each other, like this:

<div class="prev">prevbutton</div>
<div class="mid">
(1 2 3 4 5 etc)
<div class="next">nextbutton</div>

and using text-align this looks good. When you turn 1 2 3 into floated divs, however, the text-align:center for the "mid" box dies. And I can't set a fixed margin-left since I don't know how many divs will reside in this box! I tried display:inline on the number divs and that kind of worked, but then I couldn't set width, height, or borders on them which makes it useless for this application.

(site has to work in IE6, Firefox, Opera, Safari)

08-24-2005, 04:16 PM
Why can't you use <span> tags inside your div?

08-24-2005, 04:26 PM
If you don't mind slightly altering the order in which those divs appear in the source, you could float the "prev" and "next" divs left and right repectively, and center the "mid" div using auto margins.
The order of the divs has to be prev - next - mid though.

08-24-2005, 04:59 PM
Oh, wait, it WAS possible to display:inline them and keep styles on the div. Sorry if I bothered anyone... :)

08-24-2005, 05:12 PM
ok cool?

08-24-2005, 05:47 PM
what about less divs?

Have you tried a single div holding the data for all three (the buttons and the list of numbers). Then float the prev button to the left and the next button, float:right;
Then assign the ul#numberList id and for all thrree control their positioning within that single div with padding and margins?

my 2p