केंद्र डिव (100% चौड़ाई) div

यहां काफी "सरल" समस्या है और यह सुनिश्चित नहीं है कि यह इतना जटिल क्यों है।केंद्र डिव (100% चौड़ाई) div

100% (चौड़ाई) आकार का div है।
एक और div इस div के बीच (आकार 940px चौड़ाई)

कोई भी विचार में तैनात है? :)

2009-09-14 Shadi Almosri

संभावित डुप्लिकेट [डीआईवी में डीआईवी कैसे केंद्र करें?] (Http://stackoverflow.com/questions/114543/how-to-center-div-in-div) – slugster

.parent { text-align: center; } 
.parent > .child { margin: 0 auto; width: 900px; }

स्रोत

2009-09-14 20:13:07 geowa4

मुझे ऐसा लगता है कि टेक्स्ट-एलाइन लग रहा था क्योंकि मेरे पास मार्जिन था और काम नहीं कर रहा था। स्वीकृत, चीयर्स। –

पाठ-संरेखण: केंद्र आंतरिक div को केंद्रित करने में सहायता नहीं करता है। – Vizjerai

हालांकि सामान के अंदर सामान (पाठ) को केंद्रित करता है, जिसके परिणामस्वरूप वही वांछित परिणाम होता है (यदि आपके पास केवल टेक्स्ट है)। ऑटो-मार्जिन काम करने के लिए, आपको भीतरी div पर चौड़ाई की आवश्यकता होती है। – geowa4

आंतरिक div के नीचे की शैली इसे केंद्रित करेगी।

margin: 0 auto;

स्रोत

2009-09-14 20:12:53

बस के अंदर div को margin: 0 auto; जोड़ें।

स्रोत

2009-09-14 20:13:36 ScottE

कुंजी मार्जिन है: 0 ऑटो; आंतरिक div पर। एक-का-प्रमाण अवधारणा उदाहरण:

margin-left: auto; 
margin-right: auto;

या बस का उपयोग करें::

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
<body> 
    <div style="background-color: blue; width: 100%;"> 
     <div style="background-color: yellow; width: 940px; margin: 0 auto;"> 
      Test 
     </div> 
    </div> 
</body> 
</html>

स्रोत

2009-09-14 20:15:28 Larsenal

यह एक अच्छा जवाब है क्योंकि यदि आप मार्जिन का उपयोग कर रहे हैं तो सही दस्तावेज़ प्रकार होना महत्वपूर्ण है: 0 ऑटो तकनीक – ScottE

विस्तार की जानकारी के लिए

, मान लें कि नीचे कोड एक div गठबंधन केंद्र कर देगा जाने

margin: 0 auto;

लेकिन ध्यान रखें, उपरोक्त सीएसएस कोड केवल तभी काम करता है जब आप अपने एचटीएमएल तत्व पर एक निश्चित चौड़ाई (100% नहीं) निर्दिष्ट करते हैं। तो अपनी समस्या के लिए पूर्ण समाधान होगा:

.your-inner-div { 
     margin: 0 auto; 
     width: 900px; 
}

स्रोत

2009-09-14 21:01:19 Khashayar

यह एक अच्छा उदाहरण है क्योंकि आप सही ढंग से स्पष्ट रूप से इंगित करते हैं कि आंतरिक div की चौड़ाई आवश्यक है। –

.outerdiv { 
    margin-left: auto; 
    margin-right: auto; 
    display: table; 
}

Internet Explorer 7 में काम नहीं करता है ... लेकिन कौन परवाह करता है?

स्रोत

2011-10-14 18:34:03 DeFliGra

केंद्र डिव (100% चौड़ाई) div

उत्तर

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