पैरेंट डिव के अंदर क्षैतिज रूप से div को केंद्र कैसे करें

114

मैं divअपने माता-पिता के divसाथ क्षैतिज रूप से कैसे केंद्र रखूं CSS?

<div id='parent' style='width: 100%;'>
 <div id='child' style='width: 50px; height: 100px;'>Text</div>
</div>

html css

— ईगल
स्रोत

1

यहाँ divs के भीतर, लंबवत, क्षैतिज या दोनों (शुद्ध CSS) केंद्रों को सरल बनाने की दो सरल विधियाँ हैं: stackoverflow.com/a/31977476/3597276

— माइकल बेंजामिन

158

मैं यह मान रहा हूं कि माता-पिता की कोई चौड़ाई या चौड़ाई नहीं है, और बाल div की चौड़ाई कम है। निम्नलिखित ऊपर और नीचे शून्य के लिए मार्जिन सेट करेगा, और पक्ष स्वचालित रूप से फिट होने के लिए। यह div को केंद्र करता है।

div#child {
    margin: 0 auto;
}

— मार्क एम्बलिंग
स्रोत

@निशान। क्या आप जानते हैं कि इसे IE6 में कैसे काम करना है? IE6 वास्तव में बहुत बेकार है, लेकिन अभी भी कुछ लोग इसका उपयोग कर रहे हैं।

— बख्तियार 16

@ बख्तियार: जहां तक मुझे याद है, यह करता है। आप क्या मुद्दे देख रहे हैं? यदि आप कुछ विशिष्ट समस्याएँ हैं, जिन्हें आप पहले नहीं छू पाए हैं, तो आप एक नया प्रश्न खोलना चाहते हैं। हालांकि मेरे पास जांच करने के लिए IE6 तक पहुंच नहीं है।

— मार्क सेलिंग

3

@ बख्तियार: वास्तव में इसके बारे में सोचने के बाद, मुझे लगता है कि IE.old में आपको div text-align: center;पर सेट करने की आवश्यकता है parentऔर फिर इसे एक के लिए बाईं ओर (या जो भी) सेट करना होगा child। यकीन नहीं होता है कि अगर इस मुद्दे IE6 की

— पुष्टि करता है

@Mark & @ बख्तियार किसी कारण से मैं अपने childdiv को बाईं ओर स्थानांतरित कर रहा था - उन ब्राउज़रों की तुलना में जो अधिक मानकों के अनुरूप हैं - IE के सभी संस्करणों में जो मैंने चेक किया (IE6-8)। और text-align: center;के लिए parentऔर text-align: left;के लिए childउन सभी संस्करणों के लिए यह तय हो गई।

— ब्रुकमार्कर

7

<div id='parent' style='width: 100%;text-align:center;'>
 <div id='child' style='width:50px; height:100px;margin:0px auto;'>Text</div>
</div>

— जेम्स गुडविन
स्रोत

2

यह समाधान IE 6 का समर्थन करता है, लेकिन text-align:left;

— Moak

1

text-align:centerचाइल्ड डिव या पैरेंट डिव से?

— अनिश नायर

6

यदि आप दो या दो से अधिक केंद्रों को केंद्र में रखना चाहते हैं (तो वे केंद्र में साथ-साथ हैं), तो यहां यह बताया गया है:

<div style="text-align:center;">
    <div style="border:1px solid #000; display:inline-block;">Div 1</div>
    <div style="border:1px solid red; display:inline-block;">Div 2</div>
</div>

— पॉल क्रिस जोन्स
स्रोत

4

आप बाईं और दाईं ओर हाशिये के लिए "ऑटो" मान का उपयोग कर सकते हैं ताकि ब्राउज़र को उपलब्ध जगह को आंतरिक रूप से दोनों तरफ समान रूप से वितरित करने में मदद मिल सके:

<div id='parent' style='width: 100%;'>
   <div id='child' style='width: 50px; height: 100px; margin-left: auto; margin-right: auto'>Text</div>
</div>

— x4u
स्रोत

2

<div id='child' style='width: 50px; height: 100px; margin:0 auto;'>Text</div>

— सोफियाने हसौ
स्रोत