मैं क्षैतिज <UL> मेनू को कैसे संरेखित करूं?

Question

मुझे एक क्षैतिज मेनू संरेखित करने की आवश्यकता है।
मैंने inline-block/ block/ center-alignआदि के मिश्रण सहित विभिन्न समाधानों की कोशिश की है , लेकिन सफल नहीं हुआ है।

यहाँ मेरा कोड है:

<div class="topmenu-design">
    <!-- Top menu content: START -->
    <ul id="topmenu firstlevel">                                                                                       
      <li class="firstli" id="node_id_64"><div><a href="#"><span>Om kampanjen</span></a></div></li>
      <li id="node_id_65"><div><a href="#"><span>Fakta om inneklima</span></a></div></li>
      <li class="lastli" id="node_id_66"><div><a href="#"><span>Statistikk</span></a></div></li>
    </ul>
    <!-- Top menu content: END -->
</div>

अपडेट करें

मुझे पता है कि केंद्र को ulभीतर कैसे संरेखित करना है div। जिसे सरफराज के सुझाव का उपयोग करके पूरा किया जा सकता है। लेकिन सूची आइटम अभी भी अंदर छोड़ दिए गए हैं ul।

क्या मुझे इसे पूरा करने के लिए जावास्क्रिप्ट की आवश्यकता है?

Comments

प्रत्येक LI में पाठ केंद्र या DIV के भीतर उल केंद्र?

— जोप

Answer 1

से http://pmob.co.uk/pob/centred-float.htm :

आधार सरल है और मूल रूप से बस एक चौड़ाई रहित फ्लोट आवरण शामिल है जो बाईं ओर तैरता है और फिर स्क्रीन को बाईं चौड़ाई स्थिति में स्थानांतरित कर दिया जाता है: सापेक्ष; छोड़ दिया: -50%। इसके बाद नेस्टेड आंतरिक तत्व को उलट दिया जाता है और + 50% की सापेक्ष स्थिति लागू की जाती है। यह तत्व को केंद्र में मृत रखने का प्रभाव है। सापेक्ष स्थिति प्रवाह बनाए रखती है और अन्य सामग्री को नीचे प्रवाहित करने की अनुमति देती है।

कोड

#buttons{
    float:right;
    position:relative;
    left:-50%;
    text-align:left;
}
#buttons ul{
    list-style:none;
    position:relative;
    left:50%;
}

#buttons li{float:left;position:relative;}/* ie needs position:relative here*/

#buttons a{
    text-decoration:none;
    margin:10px;
    background:red;
    float:left;
    border:2px outset blue;
    color:#fff;
    padding:2px 5px;
    text-align:center;
    white-space:nowrap;
}
#buttons a:hover{ border:2px inset blue;color:red;background:#f2f2f2;}
#content{overflow:hidden}/* hide horizontal scrollbar*/

<div id="buttons">
    <ul>
        <li><a href="#">Button 1</a></li>
        <li><a href="#">Button 2's a bit longer</a></li>
        <li><a href="#">Butt 3</a></li>
        <li><a href="#">Button 4</a></li>
    </ul>
</div>

Comments

क्या आप लिंक रोट को रोकने के लिए इस उत्तर में कुछ कोड या संदर्भ जोड़ सकते हैं?

— रात्रि विश्राम ३३'११

समाधान बहुत अच्छा काम करता है और मुझे इतने लंबे समय के बाद यह पूछने के लिए खेद है, लेकिन क्या होगा अगर मेरे पास सीएसएस ड्रॉप डाउन है? मैं अतिप्रवाह का उपयोग नहीं कर सकता: माता-पिता में छिपा हुआ। लेकिन यह अभी भी यहाँ की तरह बह निकलेगा : homeafrika.com ।

— सामिया रूपोंटी

वास्तव में उस साइट पर कोई अतिप्रवाह नहीं देखें। मुझे यकीन नहीं है कि आपको अतिप्रवाह की आवश्यकता है: छिपा हुआ; बिट वैसे भी, क्योंकि यह क्षैतिज अतिप्रवाह के लिए है, आप हमेशा अतिप्रवाह-एक्स की कोशिश कर सकते हैं: छिपा हुआ; बजाय। वास्तविक समय की सहायता के लिए webchat.freenode.net/?nick=oerflowono&channels=#webooks ।

— २१:१२ को २१:३१

समाधान मेनू को अच्छी तरह से केंद्र में रखता है, लेकिन अगर आपके पास सबमेनस है जो होवर पर एक निश्चित निश्चित स्थान पर खुलना चाहिए, तो आप position: relativeमुख्य मेनू position:absoluteके उप मेनू के व्यवहार को बदल देते हैं ।

— cweiske

@reisio #buttonsओपी के प्रश्न में आईडी कहां है ? जहाँ नोटिस है, आपके उत्तर में, कि उसे इसका उपयोग करना है? यदि आप वास्तव में इस सवाल का जवाब नहीं दे रहे हैं, तो यह कैसे स्वीकार किया जा सकता है और शीर्ष-वोट किए गए उत्तर , केवल कुछ लिंक से कुछ ऑफ-टॉपिक ब्ला-ब्ला का हवाला देते हुए?

— trejder

Answer 2

यह मेरे लिए काम करता है। यदि मैंने आपके प्रश्न को गलत नहीं माना है, तो आप इसे आजमा सकते हैं।

    div#centerDiv {
        width: 100%;
        text-align: center;
        border: 1px solid red;
    }
    ul.centerUL {
        margin: 2px auto;
        line-height: 1.4;
        padding-left: 0;
    }
    .centerUL li {
        display: inline;
        text-align: center;
    }

<div id="centerDiv">
    <ul class="centerUL">
        <li><a href="http://www.amazon.com">Amazon 1</a>&nbsp;&nbsp;</li>
        <li><a href="http://www.amazon.com">Amazon 2</a>&nbsp;&nbsp;</li>
        <li><a href="http://www.amazon.com">Amazon 3</a></li>
    </ul>
</div>

Comments

@cweiske से सहमत हैं। बस एक पाठ संरेखित करें: युक्त div पर केंद्र ने मेरे लिए समस्या हल कर दी

— Kim Stacks

आपको बस यह सुनिश्चित करने की आवश्यकता होगी कि अंदर कोई पाठtext-align: left;

— जुआन मेंडेस

ये बहुत प्यारी है! लेकिन, उल बाईं तरफ डिफ़ॉल्ट पैडिंग है जिसका मतलब है कि मेनू केंद्र के दाईं ओर स्थित है। आपको पैडिंग-लेफ्ट के साथ उल से डिफ़ॉल्ट पैडिंग को हटाने की आवश्यकता होगी: 0;

— इरीटेटिव जिप्सी

पूर्ण रूप से स्वीकृत समाधान की तुलना में बेहतर उत्तर, प्रदर्शन का उपयोग: इनलाइन चाल करता है। फ्लोट का उपयोग न करें, इसकी अत्यधिक जटिल। इनसाइट्स के लिए धन्यवाद @Robusto

— Clain

पाठ्य-संरेखण केंद्र ली में अनावश्यक है

— अमीना नुरैनी

Answer 3

CSS3 के फ्लेक्सबॉक्स के साथ। सरल।

ul {
  display: flex;
  justify-content: center;
}

ul li {
  padding: 0 8px;
}

Comments

मैं निश्चित रूप से इस विधि की सिफारिश करूंगा

— कैरास

मैं भी चुने हुए उत्तर पर इस विधि की सिफारिश करूंगा।

— मिकबर्कजेन्नर

मैं तुम्हें एक बियर!

— सुयश दीक्षित

मुझे कहना होगा कि मैंने न तो कभी फ्लेक्स का इस्तेमाल किया है, न ही जस्टिफाई-कंटेंट से पहले। बहुत बढ़िया जवाब

— Gman

ग्रेट उत्तर बीरो

— इलियास करीम

Answer 4

यह सबसे सरल तरीका है जो मैंने पाया। मैंने आपका html इस्तेमाल किया। गद्दी सिर्फ ब्राउज़र की चूक को रीसेट करने के लिए है।

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

<div class="topmenu-design">
  <!-- Top menu content: START -->
  <ul id="topmenu firstlevel">
    <li class="firstli" id="node_id_64">
      <div><a href="#"><span>Om kampanjen</span></a>
      </div>
    </li>
    <li id="node_id_65">
      <div><a href="#"><span>Fakta om inneklima</span></a>
      </div>
    </li>
    <li class="lastli" id="node_id_66">
      <div><a href="#"><span>Statistikk</span></a>
      </div>
    </li>
  </ul>
  <!-- Top menu content: END -->
</div>

Answer 5

बिना किसी हैक और पूर्ण क्रॉस-ब्राउज़र समर्थन के, यह एक सुंदर रॉक-सॉलिड तरीके से करने का एक अच्छा लेख है। मेरे लिये कार्य करता है:

-> http://matthewjamestaylor.com/blog/beautiful-css-centered-menus-no-hacks-full-cross-browser-support

Comments

क्या लिंक के नीचे जाने की स्थिति में आप इसका सारांश पोस्ट कर सकते हैं?

— एलेक्स

Answer 6

इसे इस्तेमाल करे:

div.topmenu-design ul
{
  display:block;
  width:600px; /* or whatever width value */
  margin:0px auto;
}

Comments

यह उल को केन्द्रित करने का काम करता है। लेकिन <LI> अभी भी बचा हुआ है। मैं चाहता हूं कि <LI> <UL> के अंदर केंद्रित हो। क्या यह संभव है?

— स्टीवन

Answer 7

इसको ऐसे करो :

   <div id="footer">
        <ul>
            <li><a href="/1.html">Link 1</a></li>
            <li><a href="/2.html">Link 2</a></li>
            <li><a href="/3.html">Link 3</a></li>
            <li><a href="/4.html">Link 4</a></li>
            <li><a href="/5.html">Link 5</a></li>
        </ul>
   </div>

और सीएसएस:

#footer {
    background-color:#ccc;
    height:39px;
    line-height:36px;
    margin:0 auto;
    text-align:center;
    width:950px;
}

#footer ul li {
    display:inline;
    font-family:Arial,sans-serif;
    font-size:1em;
    padding:0 2px;
    text-decoration:none;
}

Answer 8

आप में से कई लोगों की तरह, मैं भी कुछ समय के लिए इससे जूझ रहा था। समाधान अंततः उल युक्त div के साथ करना था। यूएल के पैडिंग, चौड़ाई आदि को बदलने के सभी सुझावों का कोई प्रभाव नहीं पड़ा, लेकिन निम्नलिखित ने किया।

यह सभी margin:0 auto;युक्त div पर है। मुझे आशा है कि यह कुछ लोगों की मदद करता है, और बाकी सभी के लिए धन्यवाद जिन्होंने पहले से ही अन्य चीजों के साथ संयोजन में यह सुझाव दिया है।

.divNav
{
    width: 99%;
    text-align:center;
    margin:0 auto; 
}

.divNav ul
{ 
    display:inline-block; 
    list-style:none;
    zoom: 1;
}

.divNav ul li 
{
    float:left;
    margin-right: .8em;       
    padding: 0; 
}

.divNav a,  #divNav a:visited
{
    width: 7.5em;
    display: block; 
    border: 1px solid #000;
    border-bottom:none;
    padding: 5px; 
    background-color:#F90;
    text-decoration: none;
    color:#FFF;
    text-align: center;
    font-family:Verdana, Geneva, sans-serif;
    font-size:1em;
}

Answer 9

डेमो - http://codepen.io/grantex/pen/InLmJ

<div class="navigation">
    <ul>
        <li><a href="">Home</a></li>
        <li><a href="">About</a></li>
        <li><a href="">Contact</a></li>
        <li><a href="">Menu</a></li>
        <li><a href="">Others</a></li>
    </ul>
</div>


.navigation {
    max-width: 700px;
    margin: 0 auto;
}
.navigation ul {
    list-style: none;
    display: table;
    width: 100%;
}
.navigation ul li {
    display: table-cell;
    text-align: center;
}
.navigation ul li a {
    padding: 5px 10px;
    width: 100%;
}

ओमग इतना साफ-सुथरा।

Answer 10

आम तौर पर एक काले स्तर के तत्व (जैसे <ul>) को केंद्र में रखने का तरीका margin:auto;संपत्ति का उपयोग करना है।

ब्लॉक स्तर के तत्व के भीतर पाठ और इनलाइन स्तर के तत्वों को संरेखित करना text-align:center;। तो सभी एक साथ कुछ इस तरह ...

ul {
    margin:auto;
}
ul li {
    text-align:center;
    list-style-position:inside; /* so that the bullet points are also centered */
}
ul li div {
    display:inline; /* so that the bullet points aren't above the content */
}

... कार्य करना चाहिए।

फ्रिंज केस इंटरनेट एक्सप्लोरर 6 है ... या अन्य IE का उपयोग न करने पर भी <!DOCTYPE>। IE6 गलत तरीके से ब्लॉक स्तर के एलिमेंट्स का उपयोग कर संरेखित करता है text-align। इसलिए यदि आप IE6 का समर्थन करना चाहते हैं (या नहीं <!DOCTYPE>) आपके पूर्ण समाधान है ...

div.topmenu-design {
    text-align:center;
}
div.topmenu-design ul {
    margin:auto;
}
div.topmenu-design ul li {
    text-align:center;
    list-style-position:inside; /* so that the bullet points are also centered */
}
div.topmenu-design ul li div {
    display:inline; /* so that the bullet points aren't above the content */
}

एक फुटनोट के रूप में, मुझे लगता id="topmenu firstlevel"है कि एक idविशेषता के रूप में अमान्य है जिसमें रिक्त स्थान नहीं हो सकते ...? वास्तव में w3c सिफारिश 'नाम' प्रकार केid रूप में विशेषता को परिभाषित करती है ...

आईडी और NAME टोकन को एक अक्षर ([A-Za-z]) से शुरू होना चाहिए और किसी भी संख्या में अक्षरों, अंकों ([0-9]), हाइफ़न ("-"), अंडरस्कोर ("_") के बाद होना चाहिए। , कॉलन (":"), और अवधियों ("।")।

Answer 11

मैंने प्रदर्शन का उपयोग किया: इनलाइन-ब्लॉक संपत्ति: समाधान में निश्चित चौड़ाई के साथ एक आवरण का उपयोग होता है। अंदर, प्रदर्शन के लिए इनलाइन-ब्लॉक के साथ उल ब्लॉक। इसका उपयोग करते हुए, उल बस असली सामग्री के लिए चौड़ाई लेते हैं! और अंत में मार्जिन: 0 ऑटो, इस इनलाइन-ब्लॉक = को केंद्र में रखने के लिए)

/*ul wrapper*/
.gallery_wrapper{
        width:          958px;
        margin:         0 auto;
  }
/*ul list*/
ul.gallery_carrousel{
        display:        inline-block;
        margin:         0 auto;
}
.contenido_secundario li{
        float:          left;
}

Answer 12

मैं इसके लिए jquery कोड का उपयोग करता हूं। (दूसरा तरीका)

    $(document).ready(function() { 
       var margin = $(".topmenu-design").width()-$("#topmenu").width();
       $("#topmenu").css('margin-left',margin/2);
    });

Answer 13

div {
     text-align: center;
}
div ul {
     display: inline-table;
}

उल इनलाइन-टेबल समस्या के साथ ठीक करता है। मैंने टेक्स्ट को केंद्र में संरेखित करने के लिए पैरेंट डिव का उपयोग किया। इस तरह यह अन्य भाषाओं में भी अच्छा लगता है (अनुवाद, विभिन्न चौड़ाई)

Answer 14

@ रोबस्टो का समाधान सबसे सरल था कि मैं क्या करने की कोशिश कर रहा था, मेरा सुझाव है कि आप इसका उपयोग करें। मैं एक गैलरी बनाने के लिए एक अव्यवस्थित सूची में छवियों के लिए एक ही काम करने की कोशिश कर रहा था ... मैंने इसके चारों ओर मूर्ख बनाने के लिए एक जेएस फिडेल बनाया। निसंकोच कोशिश करें।

[इसे रोबो के सैंपल कोड का उपयोग करके सेट किया गया]
HTML:

<div id="centerDiv">
    <ul class="centerUL">
        <li><a href="http://www.amazon.com"><img src="http://placehold.it/200x150>         </a>&nbsp;&nbsp;</li>
        <li><a href="http://www.amazon.com"><img src="http://placehold.it/200x150"></a>&nbsp;&nbsp;</li>
        <li><a href="http://www.amazon.com"><img src="http://placehold.it/200x150"></a></li>
    </ul>
</div>

सीएसएस:

div#centerDiv {
    width: 700px;
    text-align: center;
    border: 1px solid red;
}
ul.centerUL {
    margin: 2px auto;
    line-height: 1.4;
}
.centerUL li {
    display: inline;
    text-align: center;
}

Answer 15

ul{margin-left:33%}

बड़ी स्क्रीन पर एक सभ्य सन्निकटन है। यह अच्छा नहीं है, लेकिन एक अच्छा गंदा तय है।

Answer 16

.topmenu-design
{
    display: inline-table;
}

यह सब!