मैं एक div को स्वचालित रूप से अपनी चौड़ाई कैसे सेट कर सकता हूं?

float:left सेट होने पर एक डीआईवी की चौड़ाई कैसे व्यवहार कर सकती है, लेकिन फ्लोट सेट किए बिना? width:auto ऐसा नहीं लगता है (क्रोम में)।मैं एक div को स्वचालित रूप से अपनी चौड़ाई कैसे सेट कर सकता हूं?

मैं की तरह काम करने के लिए निम्न ...

.center 
{ 
    margin-left: auto; 
    margin-right: auto; 
    width: auto; 
}

स्रोत

2011-04-19 Justin808

आप display: inline-block की कोशिश कर सकते हैं और देखते हैं कि अगर अपनी स्थिति में काम करता है कुछ पाने के लिए कोशिश कर रहा हूँ। हालांकि, आप इसे margin-left: auto & margin-right: auto का उपयोग करके केंद्र में सक्षम नहीं कर पाएंगे क्योंकि उस तकनीक को चौड़ाई मान की आवश्यकता है।

यदि संभव हो, तो display: inline-block का उपयोग करें और इसके कंटेनर पर text-align: center सेट करें।

<div style="text-align: center"> 
    <div style="display: inline-block;"> 
    This will expand only as far as it needs to 
    </div> 
</div>

jsFiddle पर डेमो काम कर देखें: http://jsfiddle.net/64kY8/

स्रोत

2011-04-19 06:48:03 jessegavin

हम्म ... जो चौड़ाई को सही ढंग से सेट करता है, लेकिन मार्जिन अब div को केंद्र में नहीं रखता है। – Justin808

सही, यही कारण है कि मैंने कहा कि आपको टेक्स्ट-एलाइन जोड़ना होगा: कंटेनर div पर केंद्र। – jessegavin

मुझे लगता है कि मैं 'टेक्स्ट-एलाइन' के लिए एक और रैपर जोड़ सकता हूं लेकिन यदि संभव हो तो मुझे घोंसले का एक और स्तर जोड़ना नहीं होगा। क्या आप अज्ञात चौड़ाई के एक div को केन्द्रित करने के किसी अन्य तरीके से जानते हैं? – Justin808

<div> रों ब्लॉक तत्व हैं। वे अपने कंटेनर की पूरी चौड़ाई लेते हैं। अवधि। बस <body> या <html>

की तरह ऊपर आपके नियम अनिवार्य रूप से यह कर रहा है: div { width:100%; margin:0 auto; } 100 के रूप में% अपने ऑटो मूल्य है।

inline-block काम करेगा, लेकिन यह वास्तव में एक वास्तविक inline-block तत्व की तरह काम नहीं करेगा।

असल में ... आप इसे चौड़ाई निर्धारित किए बिना इसे नहीं कर सकते हैं।

यदि आप इनलाइन-ब्लॉक मार्ग पर जाते हैं, तो इसे पढ़ लें ... आप अपने सीएसएस अपेक्षाओं के साथ कुछ अप्रत्याशित लड़ाई लड़ सकते हैं।

<div> 
    <div style="display: table; margin: auto"> 
    This will expand only as far as it needs to 
    </div> 
</div>

यहाँ:

http://www.brunildo.org/test/InlineBlockLayout.html (लिंक का पालन MSDN पन्ने के नीचे स्थित पाया) http://msdn.microsoft.com/en-us/library/ms530751%28v=vs.85%29.aspx

स्रोत

2011-04-19 06:53:01 Dawson

उह..क्या देता है? – Dawson

आप में से जो लोग अभी भी इस समस्या का सामना करते आ रहे हैं के लिए, आजकल आप इस के साथ संभाल कर सकते हैं स्वीकार्य उत्तर के आधार पर एक नया पहेली है: http://jsfiddle.net/j33qL8pa/1/

स्रोत

2015-01-21 01:12:09 kayakyakr

मुझे लगता है कि यह आजकल काम करता है:

.center 
{ 
    width: fit-content; 
    margin-left: auto; 
    margin-right: auto; 
}

स्रोत

2017-07-24 11:58:10 jiggunjer

http://caniuse.com/#search=fit-content –

मैं एक div को स्वचालित रूप से अपनी चौड़ाई कैसे सेट कर सकता हूं?

उत्तर

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