Центрирование нескольких элементов внутри div

Question

Привет, Я пытаюсь создать панель разбиения на страницы для одного из моих списков и хочу, чтобы он был по центру. В настоящее время это выглядит так:

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

Итак, я пытаюсь сделать так, чтобы все элементы div "page" направлялись в центр контейнера "panel", например:

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

Есть ли способ реализовать это , не зная ширину , в которой нуждаются элементы "страницы" (может быть 3 или 9 страниц, и обе ситуации должны обрабатываться правильно).

Заранее спасибо.

Answer 1

Есть ли причина, по которой вы хотите, чтобы страницы были <div> с? Если вы сделаете их <span class='page'> (что является более семантически правильным imho) и примените text-align: center; к панели, вы получите нужный эффект. В противном случае вы могли бы сделать display: inline; на страницах, но для этого вы могли бы также перейти к <span>

Answer 2

Поскольку это список чисел, вы должны рассмотреть возможность размещения их в списке, чтобы быть семантически правильными. Запихните их в UL, сделайте это с CSS, и вы получите золотой.

Может быть, так:

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

И стиль в CSS как этот:

.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;}

Поиграйте с отступами и полями. Всегда хорошая идея добавить немного жирности вашим ссылкам, когда они используются в нумерации страниц, вкладках и меню.

Протестировано в Opera 9, FF3, IE6, Chrome

Answer 3

Вы должны использовать div для чисел?

Я бы заменил эти div на span, а затем применил бы выравнивание текста: центр к внешнему div (.panel)