CSS text-align: center;

Question

çalışmıyor aşağıdaki html var: Aşağıdaki CSS ile

<div id="footer"> 
    <ul id="menu-utility-navigation" class="links clearfix"> 
     <li class="menu-685 menu-site_map first">Site Map 
     </li> 
     <li class="menu-686 menu-privacy_policy">Privacy Policy 
     </li> 
     <li class="menu-687 menu-terms___conditions">Terms &amp; Conditions 
     </li> 
     <li class="menu-688 menu-contact_us last">Contact Us 
     </li> 
    </ul> 
</div> 

: tarzı çalışıyordu eğer font-size bit attı

div#footer { 
    font-size: 10px; 
    margin: 0 auto; 
    text-align: center; 
    width: 700px; 
} 

sadece görmek için (Firebug'ın raporlarında Çalışıyorum ama görmek istedim. Çalışıyor. Ancak metin, Firefox'ta veya Safari'de altbilgide ortalanmıyor (henüz IE'de kontrol etmediniz).

Marj içeren ve içermeyen denedim: 0 otomatik; ve metin hizalaması olan ve olmayan: center; Bu şeylerin hiçbir kombinasyonu işe yaramadı.

div#footer { 
    font-size: 10px; 
    margin: 0 auto; 
    text-align: center; 
    width: 700px; 
} 

Inherited fromdiv#page 
#skip-to-nav, #page { 
    line-height: 1.5em; 
} 

Inherited frombody.html 
body { 
    color: #666666; 
    font-family: verdana,arial,sans-serif; 
} 

Yardım:

burada

dışarı kundakçı gelen konur?

Answer 1

Tüm öğelerin yan yana olmasını istediğinizi ve her şeyin yatay olarak ortalanmasını istediğinizi farz ediyorum. Tüm yatay alanı kaplayan, varsayılan olarak display: block

div#footer ul li { display: inline } 

sen, muhtemelen listenin mermi kurtulmak istiyorum yaptık anda ekle:

div#footer ul { list-style-type: none; padding: 0px; margin: 0px } 

Answer 2

liste öğeleri içerisinde metin merkezli olmak istiyorsanız, ,

ul#menu-utility-navigation { 
    width: 100%; 
} 

ul#menu-utility-navigation li { 
    text-align: center; 
} 

Answer 3

ailesindeki yatay bir inline-block eleman hizalama merkezini yapmak için text-align:center t ekleyin: deneyin o ebeveynleri.

Answer 4

Sana ortalamak için herhangi Bootstrap versiyonunu ama kullanışlı bir yardımcı sınıfını kullanın bilin ve bu sınıf margin ve display CSS özelliklerini içeren ancak .text-center sınıf yalnızca text-align özelliği içerdiğinden bu .center-block olduğu merkezde bir öğe blok yok

Bootstrap Helper Class center-block