2009-03-05 19 views
1

Selamlar, Listelerimden biri için bir sayfalandırma paneli oluşturmaya çalışıyorum ve onu ortalamak istiyorum.Bir divanın içinde çeşitli öğeleri ortalamak

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

mi var: Temelde böyle, "paneli" kabın merkezine gidin "sayfa" div elemanlarının tüm yapmaya çalışıyorum Yani

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

: gibi Şu görünüyor 'un "sayfa" elemanlarının gereksinim duyduğu genişliği bilmeden uygulayabilmenin bir yolu (3 veya 9 sayfa olabilir ve her iki durum da uygun şekilde ele alınmalıdır).

Şimdiden teşekkürler.

cevap

7

sayfaların <div> ler olmak istiyorum bir sebebi var mı? Eğer bir <span class='page'> (hangisi daha doğru bir şekilde imho) yaparsanız ve text-align: center; panelini uygularsanız, istediğiniz efekti elde edersiniz. Aksi takdirde, sayfalarda display: inline; yapabilirdiniz, ancak bunun için de <span>

+0

1 de test edilmiştir - herkes aynı noktaları, ama iyi de – annakata

+0

açıkladı Keşke display: inline-block; tüm tarayıcılarda çalıştı. – mbillard

+0

Ekranda biraz kazdıktan sonra: satır içi-blok, inline-block çapraz tarayıcı uyumlu hale getirmek için bir hack açıklayan bir sayfa buldum: http://foohack.com/2007/11/cross-browser-support -line içi-blok-stil /. Hile yapması gerekiyor gibi görünüyor. – bezmax

0

Sayılar için div kullanmak zorunda mısınız?

i yerine açıklıklı olanlar div'leri değiştirir ve bir text-align geçerli olacak: outter div (.panel) için merkezi

0

adresine gidin. Bu, bir sayı listesi olduğu için, bunları semantik olarak doğru bir listeye yerleştirmeyi düşünebilirsiniz. Onları CSS ile altın olan bir UL stiline sokun. belki gibi

: CSS'deki

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

Ve stil bu şekilde: dolgu ve kenar boşlukları etrafında

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

Çal. Sayfalama, sekmeler ve menülerde kullanıldığında bağlantılarınıza bazı şişmanlık eklemek her zaman iyi bir fikirdir.

Opera 9, FF3, IE6, Chrome

İlgili konular