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

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

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

Так что я в основном пытаются сделать все «страницы» Див элементы идут к центру «панели» контейнера, как это:

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

Есть способ реализовать это , не зная ширины, что элементы «страницы» нуждаются (может быть 3 или 9 страниц, и в обеих ситуациях необходимо надлежащим образом обрабатывать).

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

источник

2009-03-05 bezmax

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

источник

2009-03-05 14:30:25

+1 - те же точки, как и все остальные, но хорошо объяснил слишком – annakata

Если только дисплей: встроенный блок; работал во всех браузерах. – mbillard

Ну, после того, как выкачали немного на дисплее: встроенный блок, я нашел страницу с описанием взлома, чтобы сделать кросс-браузер совместимым: http://foohack.com/2007/11/cross-browser-support -for-inline-block-styling /. Похоже, это должно сделать трюк. – bezmax

Вам нужно использовать divs для чисел?

я бы заменить эти дивы с пролетами, а и затем применить выравнивания текста: центр в Outter DIV (.panel)

источник

2009-03-05 14:28:19

Как это список чисел, вы можете рассмотреть возможность размещения их в списке, чтобы он был семантически правильным. Перетащите их в 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, хром

источник

2009-03-05 14:54:55 random

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

ответ

Смежные вопросы