एक फ्लोट को केंद्रीय रूप से संरेखित कैसे करें: सीएसएस के साथ बाएं उल/ली नेविगेशन मेनू?

तो मैं एक क्षैतिज नेविगेशन बार प्रदर्शित करने के लिए जगह में निम्नलिखित सीएसएस का उपयोग कर दिया है:एक फ्लोट को केंद्रीय रूप से संरेखित कैसे करें: सीएसएस के साथ बाएं उल/ली नेविगेशन मेनू?

.navigation ul { 
    list-style: none; 
    padding: 0; 
    margin: 0; 
} 

.navigation li { 
    float: left; 
    margin: 0 1.15em; 
    /* margin: 0 auto;*/ 
} 

.navigation { 
    /* width: auto;*/ 
    /* margin: 0 auto;*/ 
    text-align: center; 
}

मेरा प्रश्न है: कैसे मैं केन्द्र शीर्षक के ऊपर नेविगेशन पट्टी संरेखित करते हैं?

स्रोत

2009-06-28 Adam Taylor

क्या आप हाइफ़न-साइट पर कॉल करते हैं? आपको इस भूमि से हटा दिया गया है। ;) (मजाक कर रहे हैं! नेटहैक खिलाड़ी पहले वाक्य को पहचान सकते हैं।) –

अपना .navigation उल चौड़ाई दें और मार्जिन का उपयोग करें: 0 ऑटो;

.navigation ul 
{ 
    list-style: none; 
    padding: 0; 
    width: 400px; 
    margin: 0 auto; 
}

स्रोत

2009-06-28 15:55:52 Emily

परिभाषित चौड़ाई के साथ असली समाधान नहीं है। यदि एक और सूची आइटम और चौड़ाई बदलने की जरूरत है। बेन मारिनी का लिंक उचित समाधान है जिसे मैंने पाया –

मारिनी का उत्तर सही उत्तर के रूप में चिह्नित किया जाना चाहिए। –

आप display: inline होने की <li> के सेट कर सकते हैं, तो <ul> पर text-align: center निर्धारित किया है। ऐसा करने से, आप सूची आइटम से float: left हटा सकते हैं और आपको नेविगेशन बार के लिए निश्चित चौड़ाई रखने की आवश्यकता नहीं है, जैसा कि आप margin: 0 auto का उपयोग करते हैं।

<html> 
    <head> 
    <style> 
     ul { 
     list-style: none; 
     text-align: center; 
     } 

     li { 
     display: inline; 
     margin: 0 1.15em; 
     } 
    </style> 
    </head> 

    <body> 
    <ul> 
     <li>Option 1</li> 
     <li>Option 2</li> 
     <li>Option 3</li> 
    </ul> 
    </body> 
</html>

स्रोत

2009-06-28 15:59:05

ठीक है, कुछ पर margin:0 auto उपयोग करने के लिए, यह एक परिभाषित चौड़ाई होना आवश्यक है। शायद सबसे अच्छा समाधान नहीं है:

ul li { 
    display: inline; 
    list-style-type: none; 
} 
ul { 
    text-align:center; 
}

स्रोत

2009-06-28 16:00:16

यदि आप इस विधि का उपयोग करना चाहते हैं तो आप 'डिस्प्ले: इनलाइन-ब्लॉक' भी कर सकते हैं लेकिन फिर भी 'सीमा', 'पृष्ठभूमि' और अन्य ब्लॉक गुणों का उपयोग करने में सक्षम हैं। –

क्या यह सभी ब्राउज़रों में काम करता है? किसी भी चेतावनी के बारे में पता होना चाहिए? – Justin

यहाँ एक solution that doesn't require specifying the width of your ul है।

स्रोत

2009-12-09 17:12:36

और भी बेहतर। जब आप बहुत छोटे आकार का आकार बदलते हैं, तो यह समाधान आइटम को भी लपेटता है, जो वही है जो मैं यहां देख रहा था। – Joe

यह असली समाधान नहीं है जो एमिली ने दिया ... –

यह एक है, मुझे – simPod

फ्लोट, मार्जिन जैसी कुछ सेटिंग्स हैं जो इस कोड को ठीक से काम करने के लिए प्रभावित कर सकती हैं। यह आईई 7 में भी काम करता है। मुझे यह कोड an article over at CSS Wizardry से मिला है।

.navigation ul 
{ 
    list-style: none; 
    padding: 0; 
    margin: 0; 
    text-align: center;/*make this change*/ 
} 
.navigation li 
{ 
    float: none;/*make this change*/ 
    display:inline;/*make this change*/ 
    margin: 0 1.15em; 
/* margin: 0 auto; */ 
} 
.navigation li a { 
    display:inline-block;/*make this change*/ 
} 
.navigation 
{ 
    /*width: auto;*/ 
    /*margin: 0 auto;*/ 
    text-align: center; 
}

स्रोत

2013-04-30 14:25:28

यह मेरे साथ बहुत अच्छा काम करता है! (अगर मैं सही हूँ: IE7 +)

फिडल: http://jsfiddle.net/fourroses666/zj8sav9q/3/

.nav{list-style:none; text-align:center;} 
.nav ul{list-style:none;} 
.nav li{display:inline;} 
.nav a{text-decoration:none; font-size:20px; line-height:20px; display:inline-block;} 

<nav class="nav" role="navigation" aria-label="main navigation"> 
    <ul> 
    <li><a href="#">Home</a></li> 
    <li><a href="#">Menu</a></li> 
    <li><a href="#">Onze producten</a></li> 
    <li><a href="#">Impressie</a></li> 
    <li><a href="#">Media</a></li> 
    <li><a href="#">Contact</a></li> 
    </ul> 
</nav>

स्रोत

2014-12-16 14:41:16 Marc

.navigation ul 
{ 
    list-style-type: none; 
    padding: 0px; 
    width: 200px; 
    margin: 0 auto; 
}

स्रोत

2015-02-18 04:51:12

आप का उपयोग कर अपने अपने कोड में LI जारी, तो आप इस का उपयोग कर सकते रखना चाहते हैं:

जेएसफ़िल्ड: https://jsfiddle.net/Lvujttw3/

<style> 
.wrapper { 
    width: 100%; 
    background-color:#80B5EB; 
    text-align: center; 
    } 
.intWrapper { 
    display: inline-block; 
    } 
.mainMenu { 
    padding: 0; 
    min-height: 40px; 
    margin:auto; 
    } 
ul { 
    list-style-type: none; 
    } 
ul li { 
    float: left; 
    font-size: 15px; 
    line-height: 40px; 
    } 
ul li A { 
    display: block; 
    color: white; 
    font-weight: bold; 
    font-family: Arial; 
    text-decoration: none; 
    min-height: 40px; 
    padding: 0 36px; 
    } 
</style> 

<div class="wrapper"> 
    <div class="intWrapper"> 
     <ul class="mainMenu"> 
      <li><a href="one.htm" style='background-color:red'>ITEM ONE</a> 
      </li><li><a href="two.htm">ITEM TWO</a> 
      </li><li><a href="three.htm" style='background-color:red'>ITEM THREE</a>   
      </li> 
     </ul></div> 
    </div> 
</div>

स्रोत

2017-02-10 16:42:21 Niente0

ul { 
display: inline-block; 
text-align: center; 
}

स्रोत

2017-06-08 07:55:24

-1

style="position: absolute; z-index: 1;"

स्रोत

2017-10-05 05:58:48

कृपया अपने उत्तर पर अधिक स्पष्टता के लिए अधिक जानकारी जोड़ें – CodeChanger

एक फ्लोट को केंद्रीय रूप से संरेखित कैसे करें: सीएसएस के साथ बाएं उल/ली नेविगेशन मेनू?

उत्तर

संबंधित मुद्दे