मैं एक div को कैसे केंद्रित करूं और इसे इसके अंदर divs के चारों ओर कैसे विस्तारित करूं?

मेरे पास एक ऐसा पृष्ठ है जिसे मैं एक पृष्ठभूमि और संपूर्ण सामग्री के चारों ओर एक सीमा के साथ केंद्रित करना चाहता हूं।मैं एक div को कैसे केंद्रित करूं और इसे इसके अंदर divs के चारों ओर कैसे विस्तारित करूं?

मैंने एक div बनाया और इसे पृष्ठभूमि रंग और सीमा सेटिंग्स के साथ सेट किया।

समस्या यह है कि इसमें इसके अंदर divs है जो फ्लोट और पृष्ठभूमि फ़्लोटिंग divs के चारों ओर फैला नहीं है। एकमात्र तरीका मैं इसे काम करने में सक्षम था स्थिति स्थापित करके: पूर्ण। तब सीमा फ़्लोटिंग divs के चारों ओर विस्तार किया था, लेकिन मैं नियमित एचटीएमएल/सीएसएस का उपयोग कर उन्हें केंद्र में असमर्थ था।

मुझे इसे केंद्र बनाने के लिए एक जावास्क्रिप्ट हैक मिला लेकिन यह पृष्ठ लोड होने के बाद ही केंद्रित है और यह खराब दिखता है।

मुझे यकीन है कि कंटेनर का विस्तार करने का एक तरीका है और अभी भी इसे केंद्रित किया गया है, मैं बस इसे समझ नहीं सकता।

यहाँ एक नमूना html पृष्ठ है कि मेरी समस्याओं

<div style="background-color: Red; width: 980px; position: absolute;" id="container"> 
    <br /> 
    <br /> 
    <br /> 
    <br /> 
    <div style="width: 400px; background-color: Black; float: left;"> 
     <br /> 
     <br /> 
    </div> 
    <div style="width: 400px; background-color: Blue; float: left;"> 
     <br /> 
     <br /> 
    </div> 
</div>

साझा करता है और यहाँ है जावास्क्रिप्ट यह काम करता है कि (jQuery का उपयोग करती)

$(function() { 
     var winH = $(window).height(); 
     var winW = $(window).width(); 
     $("#container").css('left', winW/2 - $("#container").width()/2); 
    });

वहाँ एक बेहतर तरीका हो गया गया है।

धन्यवाद

स्रोत

2009-05-20 Sruly

उपयोग auto करना चाहिए और सही margin तत्व केंद्रित करने के लिए।

चल तत्वों के बाद एक तत्व रखो और clear का उपयोग उन्हें नीचे डाल दिया है। चूंकि यह तैरता नहीं है, यह बाहरी div के आकार को प्रभावित करेगा।

<div style="margin: 0 auto; background-color: Red; width: 980px;" id="container"> 
    <br /> 
    <br /> 
    <br /> 
    <br /> 
    <div style="width: 400px; background-color: Black; float: left;"> 
     <br /> 
     <br /> 
    </div> 
    <div style="width: 400px; background-color: Blue; float: left;"> 
     <br /> 
     <br /> 
    </div> 
    <div style="clear: both; height: 0; overflow: hidden;"></div> 
</div>

स्रोत

2009-05-20 16:25:33 Guffa

धन्यवाद। मैंने सोचा कि एक रास्ता था, लेकिन मैं इसे समझ नहीं पाया। – Sruly

यह एक मुश्किल से एक है, लेकिन मैं स्टाइलशीट में निम्न कोड का उपयोग करें;

<style>div.sentor {text-align: center; height: 100%;} div.child{margin-left: auto; margin-right: auto; width: 95%; height: 100%;}</style>

तब शरीर में;

<div class="sentor"> 
<div class="child"> 
    <div id="mycontent">

इस रूप में छोड़ दिया चाल

स्रोत

2009-05-20 16:24:48 simon622

शायद मैं आपके सवाल का काफी अच्छी तरह से समझ नहीं हूँ, लेकिन मुझे लगता है कि आप इस के लिए कुछ इसी तरह की तलाश में हैं। यहाँ हमारे सरल लेआउट है:

body { 
    text-align: center; 
} 

div#center { 
    text-align: left; 
    width: 600px; // Or some other arbitrary width 
    margin: 0 auto; 
}

यह शरीर के भीतर सब कुछ केंद्रित हो जाएगा:

<html> 
    <head> 
     ... 
    </head> 

    <body> 

     <div id="center"> 
      <!-- your content --> 
     </div> 

    </body> 

</html>

पेज के केंद्र के लिए ले जाने के लिए div # केन्द्र की सामग्री को प्राप्त करने के लिए, हम निम्नलिखित सीएसएस की जरूरत है। हालांकि, पाठ-संरेखण: केंद्र; संपत्ति को शरीर के बच्चों पर भी लागू किया जाएगा, इसलिए हम दूसरे शैली के नियम के साथ इसे रद्द कर देते हैं। वैकल्पिक रूप से, div # सेंटर के स्थान पर, आप निम्नलिखित शैली नियम इस्तेमाल कर सकते हैं:

body * { 
    text-align: left; 
}

स्रोत

2009-05-20 16:31:45

यह इंटरनेट एक्सप्लोरर में एक बग का उपयोग करता है। यह किसी अन्य ब्राउज़र में काम नहीं करता है, क्योंकि वे मानक का पालन करते हैं और तत्वों को अवरुद्ध करने के लिए टेक्स्ट-एलाइन को लागू नहीं करते हैं। – Guffa

हाँ मैंने मार्जिन छोड़ा: 0 ऑटो; अंश। मैं उसके बारे में भूल गया था। मैंने इसे अपने स्वयं के कई कार्यों में भी शामिल किया है! –

उपयोग:

<div style="margin:0 auto; overflow:hidden; background-color: Red; width: 980px; id="container">

मार्जिन: 0 ऑटो; लाल div केंद्र होगा।

अतिप्रवाह: छुपा; दो फ्लोटिंग divs रखने के लिए लाल div खिंचाव बना देगा।

स्रोत

2009-05-20 21:24:34 Emily

मैं एक div को कैसे केंद्रित करूं और इसे इसके अंदर divs के चारों ओर कैसे विस्तारित करूं?

उत्तर

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