को div

Question

के केंद्र में सूची आइटम को संरेखित करने की आवश्यकता है मैं एक div के भीतर केंद्रित होने के लिए लिंक की एक सूची संरेखित करना चाहता हूं।

मैंने मार्जिन की कोशिश की: 0 ऑटो, लेकिन कोई भाग्य नहीं।

नोट: नेविगेशन-रैपर div को जगह में रहने की आवश्यकता है, यह केवल एचटीएमएल का स्निपेट है जो चिंता का विषय है।

div को ठीक से संरेखित करने के लिए आवश्यक लिंक देखने के लिए http://jsfiddle.net/bkmorse/aaCY7/ देखें। इस तरह width .Write परिभाषित साथ

एचटीएमएल

<div id="navigation-wrapper"> 
    <ul id="top-navigation"> 
    <li><a href="">Home</a></li> 
    <li><a href="">Volunteer</a></li> 
    <li><a href="">Support</a></li> 
    <li><a href="">Educate</a></li> 
    <li><a href="">Contact</a></li> 
    <li><a href="">Gift Shop</a></li> 
    <li><a href="">Directions</a></li> 
    </ul> 
</div> 

सीएसएस

#navigation-wrapper { 
width:465px; 
border:1px solid red; 
} 

#top-navigation { 
margin: 0 auto; 
border:1px solid blue; 
padding:5px 0; 
} 

#top-navigation li { 
display:inline; 
list-style-type:none; 
margin:2; 
}​ 

Answer 1

अपने सीएसएस को इस पर बदलें। वह काम करता है।

#navigation-wrapper { 
width:465px; 
border:1px solid red; 
margin:0 auto; 
text-align:center; 
} 

#top-navigation { 
border:1px solid blue; 
padding:5px 0; 
} 

#top-navigation li { 
display:inline; 
list-style-type:none; 
margin:2; 
} 

Answer 2

Margin:auto काम:

#navigation-wrapper { 
width:465px; 
margin: 0 auto; 
border:1px solid red; 
    text-align:center; 
} 

#top-navigation { 
display:inline-block; 
border:1px solid blue; 
padding:5px 0; 
} 

जांच इस http://jsfiddle.net/aaCY7/1/

Answer 3

does not एक सेट चौड़ाई यह वास्तव में केंद्रित है, तो अपने शीर्ष नेविगेशन उल के बाद से

। हालांकि इसके भीतर ली नहीं है। आप देखना चाहते हैं तो उन वस्तुओं तो

#top-navigation { 
margin: 0 auto; 
border:1px solid blue; 
padding:5px 0; 
text-align: center; 
} 

केंद्रित आप उस सूची div में केंद्रित चाहते हैं, लेकिन अभी भी प्रयोग इस

#top-navigation { 
margin: 0 auto; 
border:1px solid blue; 
padding:5px 0; 
width: 300px; 
} 

अंदर चीजों को संरेखित छोड़ दिया है या दोनों अगर दो के कुछ संयोजन करते हैं जरूरत है।

Answer 4

मुझे केवल मेरे लिए जो ली गई वस्तुओं के लिए प्रदर्शन इनलाइन जानने की आवश्यकता है। केंद्र संरेखण के मामले में हम टेक्स्ट-एलाइन जोड़ सकते हैं: मुख्य div में केंद्र। उपर्युक्त मामले में #top-navigation { margin: 0 auto; border:1px solid blue; padding:5px 0; text-align: center; } यह