Centering several elements inside a div

Question

Greetings, I'm trying to create a pagination panel for one of my lists and want to make it centered. Currently it looks like:

<div class="panel">
  <div class="page">1</div>
  <div class="page">2</div>
  <div class="page">3</div>
</div>

So I'm basically trying to make all of the "page" div elements go to the center of "panel" container, like this:

_____________________________
|           1 2 3            |
------------------------------

Is there a way to implement that without knowing the width that "page" elements need (there could be 3 or 9 pages and both situations should be handled properly).

Thanks in advance.

Answer 1

do you have to use divs for the numbers?

i would replace those divs with spans instead and then apply a text-align:center to the outter div (.panel)

Answer 2

Is there any reason you want the pages to be <div>s? If you make them a <span class='page'> (which is more semantically correct imho) and apply text-align: center; to the panel you get the effect you want. Otherwise you could do display: inline; on the pages, but for that you might as well go to <span>

Answer 3

As this is a list of numbers, you shoud consider placing them in a list to be semantically correct. Shove them into a UL, style that with CSS and you're golden.

Like so perhaps:

<div class="panel">
 <ul>
   <li><a href="#">1</a></li>
   <li><a href="#">2</a></li>
   <li><a href="#">3</a></li>
 </ul>
</div>

And style in CSS as this:

.panel{text-align:center; }
.panel ul{list-style-type:none; margin:0 auto; padding:0; overflow:hidden; }
.panel li{display:inline; }
.panel li a{padding:5px; margin:0;}

Play around with the padding and margins. Always a good idea to add some fatness to your links when they're used in pagination, tabs and menus.

Tested in Opera 9, FF3, IE6, Chrome