सामग्री की एक ब्लॉक केंद्र जब आप अग्रिम में इसकी चौड़ाई नहीं जानते

Question

कई प्रयासों और खोज के बाद मुझे कभी भी सीएसएस 2 के साथ ऐसा करने का संतोषजनक तरीका नहीं मिला है।

इसे पूरा करने का एक आसान तरीका यह है कि नीचे दिए गए नमूने में दिखाए गए अनुसार इसे <table> में आसान तरीके से लपेटें। क्या आप जानते हैं कि टेबल लेआउट से बचने और क्विर्की चाल से बचने के लिए इसे कैसे किया जाए?

table { 
 
    margin: 0 auto; 
 
}

<table> 
 
    <tr> 
 
    <td>test<br/>test</td> 
 
    </tr> 
 
</table>

---

क्या मैं जानना चाहता हूँ कि कैसे एक निश्चित चौड़ाई के बिना यह करने के लिए और यह भी एक ब्लॉक किया जा रहा है।

Answer 1

@Jason, हां, <center> काम करता है। अच्छा समय। मैं, निम्नलिखित प्रस्ताव करेंगे, हालांकि:

body { 
 
    text-align: center; 
 
} 
 

 
.my-centered-content { 
 
    margin: 0 auto; /* Centering */ 
 
    display: inline; 
 
}

<div class="my-centered-content"> 
 
    <p>test</p> 
 
    <p>test</p> 
 
</div>

संपादित @Santi, एक ब्लॉक स्तर तत्व माता पिता कंटेनर की चौड़ाई भर जाएगा, तो यह प्रभावी रूप से width:100% और हो जाएगा पाठ बाईं ओर बह जाएगा, आपको बेकार मार्कअप और एक केंद्रित तत्व के साथ छोड़ देगा। आप display: inline-block; आज़मा सकते हैं। फ़ायरफ़ॉक्स शिकायत कर सकता है, लेकिन it's right। साथ ही, .my-centered-content DIV के सीएसएस पर border: solid red 1px; जोड़ने का प्रयास करें ताकि आप यह देखने के लिए क्या हो रहा है।

Answer 2

यह lamest जवाब होने जा रहा है, लेकिन यह काम करता है:

Use the deprecated <center> tag।

: पी

मैंने आपको बताया कि यह लंगड़ा होगा। लेकिन, जैसे मैंने कहा, यह काम करता है!

* कंपकंपी *

Answer 3

मुझे लगता है कि अपने उदाहरण बस के रूप में अच्छी तरह से काम करेगा अगर आप एक < तालिका > के बजाय एक <div> इस्तेमाल किया। केवल अंतर यह है कि < तालिका > में पाठ भी केंद्रित है। यदि आप उसे भी चाहते हैं, तो बस टेक्स्ट-एलाइन जोड़ें: केंद्र; राज करते हैं।

ध्यान में रखना एक और बात यह है कि <div> डिफ़ॉल्ट रूप से सभी उपलब्ध क्षैतिज स्थान को भर देगा। यदि आप सुनिश्चित नहीं हैं कि यह कहां से शुरू होता है और समाप्त होता है तो उस पर एक सीमा रखें।

Answer 4

निम्नलिखित काम अच्छी तरह से पर्याप्त है। ध्यान दें स्थिति, और ऑटो

<div style="border: 1px solid black; 
      width: 300px; 
      height: 300px;"> 
      <div style="width: 150px; 
         height: 150px; 
         background-color: blue; 
         position: relative; 
         left: auto; 
         right: auto; 
         margin-right: auto; 
         margin-left: auto;"> 
      </div> 
</div> 

नोट के उपयोग: यकीन नहीं अगर यह IE में काम करता है।

Answer 5

#wrapper { 
 
    width: 100%; 
 
    border: 1px solid #333; 
 
} 
 
#content { 
 
    width: 200px; 
 
    background: #0f0; 
 
}

<div id="wrapper" align="center"> 
 
    <div id="content" align="left"> Content Here </div> 
 
</div>

Answer 6

FF3 में, आप कर सकते हैं:

<div style="display: table; margin: 0px auto 0 auto;">test<br>test</div> 

इस का उपयोग करते हुए जो कुछ तत्व सबसे अर्थ समझ में आता है का लाभ (, कुछ बेहतर साथ div की जगह यदि उपयुक्त हो) है, लेकिन यह नुकसान आईई में विफल रहता है (grr ...)

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

यह वास्तव में इस बात पर निर्भर करता है कि आप क्या करना चाहते हैं। आपके सरल परीक्षण मामले को देखते हुए, पाठ-संरेखण वाला एक div: केंद्र का बिल्कुल वही प्रभाव होगा।