मैं <ul> <li> को केंद्र में कैसे रख सकता हूँ

Question 1

मैं <li>निश्चित-चौड़ाई में अनियंत्रित सूची को कैसे केंद्र कर सकता हूं div?

<table width="100%">
  <tbody>
  <tr>
    <td width="41%"><img src="/web/20100104192317im_/http://www.studioteknik.com/html2/html/images/hors-service.jpg" width="400" height="424"></td>
    <td width="59%"><p align="left">&nbsp;</p>
      <h1 align="left">StudioTeknik.com</h1>
      <p><br align="left">
        <strong>Marc-André Ménard</strong></p>
      <ul>
        <li>Photographie digitale</li>
        <li>Infographie </li>
        <li>Débug et IT (MAC et PC)</li>
        <li> Retouche </li>
        <li>Site internet</li>
        <li>Graphisme</li>
      </ul>
      <p align="left"><span class="style1"><strong>Cellulaire en suisse : </strong></span><a href="#">+41 079 573 48 99</a></p>
      <p align="left"><strong class="style1">Skype : </strong> <a href="#">menardmam</a></p>
    <p align="left"><strong class="style1">Courriel :</strong><a href="https://web.archive.org/web/20100104192317/mailto:menardmam@hotmail.com">    info@studioteknik.com</a></p></td>
  </tr>
  </tbody>
</table>

स्निपेट का विस्तार करें

Question 2

चूंकि ulऔर liतत्व display: blockडिफ़ॉल्ट रूप से हैं - उन्हें ऑटो मार्जिन और एक चौड़ाई दें जो उनके कंटेनर से छोटा है ।

ul {
    width: 70%;
    margin: auto;
}

यदि आपने उनकी प्रदर्शन संपत्ति बदल दी है, या कुछ ऐसा किया है जो सामान्य संरेखण नियमों (जैसे कि उन्हें फ्लोटिंग) से आगे निकलता है तो यह काम नहीं करेगा।

Question 3

उल को केंद्र में रखने के लिए और साथ ही इसमें लगे एलई तत्व भी हैं , और उल की चौड़ाई को गतिशील रूप से बनाते हैं, प्रदर्शन का उपयोग करें: इनलाइन-ब्लॉक; और इसे एक केंद्रित div में लपेटें।

<style type="text/css">
    .wrapper {
        text-align: center;
    }
    .wrapper ul {
        display: inline-block;
        margin: 0;
        padding: 0;
        /* For IE, the outcast */
        zoom:1;
        *display: inline;
    }
    .wrapper li {
        float: left;
        padding: 2px 5px;
        border: 1px solid black;
    }
</style>

<div class="wrapper">
    <ul>
        <li>Three</li>
        <li>Blind</li>
        <li>Mice</li>
    </ul>
</div>

अपडेट करें

यहाँ ऊपर दिए गए कोड का jsFiddle लिंक है।

Question 4

मुझे फ्लेक्सबॉक्स पसंद है:

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

Question 5

कदम :

style="text-align:center;"माता-पिता को लिखेंdiv कोul
लिखो style="display:inline-table;"के लिएul
लिखने style="display:inline;"के लिएli

या उपयोग करें

<div class="menu">
 <ul>
   <li>item 1 </li>
   <li>item 2 </li>
   <li>item 3 </li>
 </ul>
</div>

<style>
 .menu { text-align: center; }
 .menu ul { display:inline-table; }
 .menu li { display:inline; }
</style>

Question 6

यह किसी भी DIV कंटेनर के अंदर UL को केन्द्रित करने का एक बेहतर तरीका है।

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

चौड़ाई का उपयोग करने के बजाय, हम टेक्स्ट / मेनू आइटम के चारों ओर स्थान निर्धारित करने के लिए पैडिंग और मार्जिन का उपयोग करते हैं। इसके अलावा, फ्लोट का उपयोग करने के बजाय: एलआई तत्व में बायां, प्रदर्शन का उपयोग करें: इनलाइन-ब्लॉक।

अपने LI को तैरते हुए, आप अपनी सामग्री को बाईं ओर तैरते हैं और फिर आपको अपने UL को केन्द्रित करने के लिए ऊपर बताए गए Hacks का उपयोग करना चाहिए। प्रदर्शन: इनलाइन-ब्लॉक आपके लिए आपकी फ्लोट संपत्ति बनाता है (सॉर्ट)। यह आपके एलआई तत्व को लेता है और इसे एक ब्लॉक तत्व में बदल देता है जो एक दूसरे के किनारे (फ्लोटिंग) नहीं होता है।

उत्तरदायी डिजाइन और बूटस्ट्रैप या फाउंडेशन जैसे फ्रेमवर्क का उपयोग करने के साथ, फ्लोट और केंद्र सामग्री की कोशिश करते समय मुद्दे होंगे। उनके पास कुछ अंतर्निहित कक्षाएं हैं, लेकिन यह हमेशा खरोंच से करना बेहतर होता है। डायनेमिक मेनू (जैसे Adobe Business उत्प्रेरक मेनू सिस्टम) के लिए यह समाधान बहुत बेहतर है।

इस ट्यूटोरियल के लिए संदर्भ यहां देखे जा सकते हैं: http://html-tuts.com/center-div-image-table-ul-inside-iv/

एचटीएमएल

<div class="container">
        <ul>
            <li><a href="#">Button</a></li>
            <li><a href="#">Button</a></li>
            <li><a href="#">Button</a></li>
            <li><a href="#">Button</a></li>
            <li><a href="#">Button</a></li>
        </ul>
    </div>

सीएसएस

.container {
    text-align: center;
    border: 1px solid green;
}
.container ul {
    border: 2px solid red;
    display: inline-block;
    margin: 10px 0;
    padding: 2px;
}
.container li {
    display: inline-block;
}
.container li a {
    display: inline-block;
    background: #444;
    color: #FFF;
    padding: 5px;
    text-decoration: none;
}

Question 7

या तो हो सकता है

div ul
{
 width: [INSERT FIXED WIDTH]
 margin: 0 auto;
}

या

div li
{
text-align: center;
}

यह इस बात पर निर्भर करता है कि यह कैसा दिखना चाहिए (या उन को मिलाकर)

Question 8

एक ब्लॉक ऑब्जेक्ट (उदाहरण के लिए ul) को केंद्रित करने के लिए आपको उस पर एक चौड़ाई सेट करने की आवश्यकता होती है और फिर आप सेट कर सकते हैं कि ऑब्जेक्ट्स बाएं और दाएं मार्जिन से ऑटो पर जाएं।

ब्लॉक ऑब्जेक्ट (जैसे इनलाइन सामग्री li) की इनलाइन सामग्री को केंद्र में रखने के लिए आप सीएसएस संपत्ति सेट कर सकते हैं text-align: center;।

Question 9

प्रयत्न

div#divID ul {margin:0 auto;}

Question 10

बस text-align: center;अपने को जोड़ो <ul>। समस्या सुलझ गयी।

Question 11

दिलचस्प है, लेकिन उल के अंदर फ्लोटेड ली तत्वों के साथ इसका प्रयास करें: यहां उदाहरण

समस्या अब: उल केंद्र में बैठने के लिए एक निश्चित चौड़ाई की जरूरत है। हालाँकि, हम इसे कंटेनर की चौड़ाई (या डायनामिक) के सापेक्ष बनाना चाहते हैं, मार्जिन: उल पर 0 ऑटो काम नहीं करता है।

एक बेहतर तरीका यह है कि आप उल / ली सूची पर जाएं और यहां एक अलग दृष्टिकोण उदाहरण का उपयोग करें

Question 12

यदि आप की चौड़ाई जानते हैं ulतो आप बस के मार्जिन सेट कर सकते हैंul करने के लिए0 auto;

यह ulयुक्त div के बीच में संरेखित करेगा

उदाहरण:

HTML:

<div id="container">
 <ul>
  <li>Item1</li>
  <li>Item2</li>
 </ul>
<div>

सीएसएस:

  #container ul{
    width:300px;
    margin:0 auto;
  }

Question 13

यहाँ समाधान मैं पा सकता है:

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

#wrapper li{
  float:left;
  position:relative;
}

Question 14

एक अन्य विकल्प है:

एचटीएमएल

<nav>
  <ul class = "main-nav"> 
   <li> Productos </li>
   <li> Catalogo </li>
   <li> Contact </li>  
   <li> Us </li>
  </ul>
</nav>

सीएसएस:

nav {
  text-align: center;
}

nav .main-nav li {
  float: left;
  width: 20%;
  margin-right: 5%;
  font-size: 36px;
  text-align: center;
}

Question 15

मैं एक ही मामले की तलाश में हूं और सभी जवाबों की चौड़ाई बदलकर कोशिश कर रहा हूं <li>।
दुर्भाग्य से सभी <ul>बॉक्स के बाईं और दाईं ओर समान दूरी पाने में विफल रहे ।

निकटतम मैच यह उत्तर है, लेकिन इसे पैडिंग के साथ चौड़ाई के परिवर्तन को समायोजित करने की आवश्यकता है

.container ul {
    ...
    padding: 10px 25px;
}

.container li {
  ...
  width: 100px;
}

नीचे परिणाम देखें, के बीच सभी दूरी <li>को भी <ul>बॉक्स एक ही हैं।

आप इसे इस jsFiddle पर देख सकते हैं:
http://jsfiddle.net/qwbexxog/14/

Question 16

<div id="container">
  <table width="100%" height="100%">
    <tr>
      <td align="center" valign="middle">
        <ul>
          <li>item 1</li>
          <li>item 2</li>
          <li>item 3</li>
        </ul>
      </td>
    </tr>
  </table>
</div>

Question 17

केंद्र-टैग का उपयोग करें

<div> <center> <ul> <li>...</li> </ul></center> </div>

:-)