मैं मार्जिन के साथ केंद्र क्यों नहीं कर सकता: 0 ऑटो?

130

मेरे पास एक #headerdiv है जो 100% widthकि div के भीतर है और मेरे पास एक अव्यवस्थित सूची है। मैंने margin: 0 autoअनऑर्डर की गई सूची पर आवेदन किया है, लेकिन यह हेडर डिव के भीतर इसे केंद्र में नहीं रखेगा।

क्या कोई मुझे बता सकता है कि क्यों? मैंने सोचा था कि अगर मैं अभिभावक div की चौड़ाई को परिभाषित करता हूं, तो अनियंत्रित सूची को खुद के साथ केंद्रित करने में सक्षम होना चाहिए margin: 0 auto। मैं क्या खो रहा हूँ?

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

<style>

* {
    margin: 0;
    padding: 0;
}

#header {
    width: 100%;    
    background-color: #333;
    min-height: 160px;
    font-family:Arial, Helvetica, sans-serif;
}

#sitename {
    font-size: 50px;
    width: 620px;
    margin:0 auto;
    padding-top: 35px;
    color:#999;
}

#header ul {
    float: right;
    margin: 0 auto;
}

#header ul li {
    float: left;
    padding-right: 20px;
    list-style-type: none;
    font-size: 20px;
}

</style>

</head>

<body>

<div id="header">
    <h1 id="sitename">Photography Auction Site</h1>

    <ul>
        <li>List of Photos</li>
        <li>Image Gallery</li>
        <li>Contact Us</li>
    </ul>
</div>

</body>
</html>

html css margin

— zeckdude
स्रोत

आप कौन सा ब्राउज़र उपयोग कर रहे हैं? IE / Win को मार्जिन ऑटो के साथ कुछ समस्याएं हैं।

— जद फ्रास

तुम भी अपने दायें को क्यों उलटते हो? कि बाहर ले, और शायद यह भी फ्लोट: ली के लिए छोड़ दिया है, और आप ठीक होना चाहिए।

— साइमन

1

मैं एक नेविगेशन बार बना रहा हूं। मैंने उल्ट के लिए फ्लोट को दाएं से बाहर निकाला और ली के लिए छोड़ दिया फ्लोट में डाल दिया, लेकिन यह अब सभी को बाईं ओर रखता है।

— zeckdude

135

आपको उस तत्व की चौड़ाई को परिभाषित करने की आवश्यकता है जिसे आप केंद्रित कर रहे हैं, मूल तत्व नहीं।

#header ul {
    margin: 0 auto;
    width: 90%;
}

संपादित करें : ठीक है, मैंने अब परीक्षण पृष्ठ देखा है, और यहां बताया गया है कि मुझे लगता है कि आप इसे चाहते हैं:

#header ul {
    list-style:none;
    margin:0 auto;
    width:90%;
}

/* Remove the float: left; property, it interferes with display: inline and 
 * causes problems. (float: left; makes the element implicitly a block-level
 * element. It is still good to use display: inline on it to overcome a bug
 * in IE6 and below that doubles horizontal margins for floated elements)
 * The styles below is the full style for the list-items. 
 */
#header ul li {
    color:#CCCCCC;
    display:inline;
    font-size:20px;
    padding-right:20px;
}

— PatrikAkerstrand
स्रोत

2

क्या होगा अगर उल की चौड़ाई गतिशील होगी। मैं गतिशील रूप से PHP के साथ ली के साथ अलग-अलग पाठ में डालने के बारे में सोच रहा हूं इसलिए मैं यह अनुमान लगाने की कोशिश कर रहा हूं।

— zeckdude

2

हाँ, तो आप मार्जिन का उपयोग कर केंद्र नहीं कर सकते: ऑटो;

— पेट्रीकस्ट्रैन्ड

1

मैंने आपके नवीनतम सुझाव की कोशिश की, लेकिन यह काम नहीं किया। मैंने आपकी सिफारिशों के साथ नवीनतम संस्करण को उसी स्थान पर अपलोड किया है ताकि आप देख सकें कि मैं क्या अनुभव कर रहा हूं। उल बस को लगभग 50px के दाईं ओर धकेला जा रहा है।

— zeckdude

1

जैसा मैंने अपने सुझाव में कहा था, फ्लोट को हटा दें: बाएं

— पेट्रीकस्ट्रैन्ड

1

यह महान काम किया! मेरे साथ चिपके रहने और मेरी मदद करने के लिए बहुत बहुत शुक्रिया! वह समस्या मुझे मार रही है! एक बार फिर धन्यवाद!

— zeckdude

43

एक इनलाइन-ब्लॉक पूरी लाइन (बाएं से दाएं) को कवर करता है, इसलिए एक मार्जिन बाएं और / या दाएं यहां काम नहीं करेगा। आपको जो चाहिए वह एक ब्लॉक है, एक ब्लॉक में बाईं ओर दाईं ओर सीमा है और इसलिए मार्जिन से प्रभावित हो सकता है।

यह मेरे लिए कैसे काम करता है:

#content {
display: block;
margin: 0 auto;
}

— Hoeks
स्रोत

बहुत उपयोगी सुझाव के लिए धन्यवाद, मुझे इनलाइन तत्व के साथ एक ही समस्या थी और मैं यह पता नहीं लगा सका कि यह काम क्यों नहीं कर रहा था

— mastazi

यह सबसे अच्छा उत्तर है, और बहु आकार खिड़की के लिए काम करता है।

— युडा प्रवीरा

14

क्यों नहीं?

#header {
    text-align: center;
}

#header ul {
    display: inline;
}

— kalys.osmonov
स्रोत

मैंने पाठ-संरेखित किया: बाएं; , #eader ul को केंद्र में रखें और बाईं ओर संरेखित करें। डायनेमिक (ऑटो) की चौड़ाई के लिए इनलाइन-ब्लॉक के रूप में प्रदर्शित करने के लिए मुझे उल सेट करने की भी आवश्यकता थी।

— ब्रेंट सेल्फ

3

क्यों पहले उत्तर सबसे अच्छा एक है मैं नहीं पता है, मैं इसे करने की कोशिश की और नहीं वास्तव में काम कर रहा है, के रूप @ kalys.osmonov ने कहा, आप दे सकते हैं text-align:centerकरने के लिए headerहै, लेकिन आप करना है ulके रूप में inline-blockकरने के बजाय inline, और भी आप नोटिस करने के लिए है यह text-alignविरासत में दिया जा सकता है जो कुछ हद तक अच्छा नहीं है, इसलिए बेहतर तरीका (IE 9 के नीचे काम नहीं करना) का उपयोग कर रहा है marginऔर transform। बस नीचे से , जैसे float rightऔर निकालें :margin;0 autoul

#header ul {
   /* float: right; */
   /* margin: 0 auto; */
   display: inline-block;
   margin-left: 50%; /* From parent width */
   transform: translateX(-50%); /* use self width which can be unknown */
  -ms-transform: translateX(-50%); /* For IE9 */
}

यह तरीका उस समस्या को ठीक कर सकता है जो ulIE8 आदि की परवाह न करते हुए डायनेमिक चौड़ाई को केंद्र बना रही है

— बिल दोउ
स्रोत

0

हम उल टैग के लिए चौड़ाई निर्धारित कर सकते हैं तो यह केंद्र को संरेखित करेगा।

#header ul {
    display: block;
    margin: 0 auto;
    width: 420px;
    max-width: 100%;
}

— वाणी स
स्रोत