सीएसएस पाठ-संरेखण: केंद्र; काम नहीं कर रहा

Question

मैं निम्न HTML है:

<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> 

निम्नलिखित सीएसएस के साथ:

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

मैं font-size बिट में फेंक दिया बस अगर शैली काम कर रहा था देखने के लिए (Firebug रिपोर्ट यह है काम कर रहा था लेकिन मैं देखना चाहता था)। यह काम कर रहा है। लेकिन पाठ फ़ायरफ़ॉक्स में या सफारी में पाद लेख में केंद्रित नहीं है (अभी तक इसे IE में जांचना है)।

मैंने मार्जिन के साथ और बिना कोशिश की: 0 ऑटो; और पाठ-संरेखण के साथ और बिना: केंद्र; उन चीजों का कोई कॉम्बो काम नहीं किया।

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

सहायता:

यहाँ

बाहर फ़ायरबग से डाला जाता है?

Answer 1

मुझे लगता है कि आप सभी वस्तुओं को एक-दूसरे के बगल में चाहते हैं, और पूरी चीज क्षैतिज रूप से केंद्रित हो।

li तत्व display: block डिफ़ॉल्ट रूप से सभी क्षैतिज स्थान लेते हैं।

जोड़े

div#footer ul li { display: inline } 

एक बार आप यह कर लें, तो आप शायद सूची के बुलेट से छुटकारा पाने के लिए चाहते हैं:

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

Answer 2

यदि आप चाहते हैं सूची आइटम में पाठ केंद्रित किया जाना है, प्रयास करें:

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

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

Answer 3

अपनी मूल में क्षैतिज एक इनलाइन-ब्लॉक तत्व मध्य में संरेखित करें बनाने के लिए, text-align:center टी जोड़ने हे इसके माता-पिता।

Answer 4

मैं तुम्हें केंद्रित के लिए किसी भी बूटस्ट्रैप संस्करण लेकिन उपयोगी सहायक वर्ग का उपयोग नहीं जानते हैं और केंद्र में एक तत्व ब्लॉक यह .center-block है, क्योंकि इस वर्ग margin और display सीएसएस गुण हो लेकिन .text-center वर्ग केवल text-align संपत्ति शामिल नहीं

Bootstrap Helper Class center-block