सीएसएस में ब्लॉक एलिमेंट्स को संरेखित करना
margin प्रॉपर्टी का उपयोग न केवल
मार्जिन सेट करने के लिए, बल्कि ब्लॉक एलिमेंट्स को
केंद्रित करने के लिए भी किया जाता है। इसके लिए दाएं और बाएं
मार्जिन को auto मान देना चाहिए।
नीचे दिए गए उदाहरण में आंतरिक ब्लॉक केंद्र में हो जाएगा:
<div class="parent">
<div class="child"></div>
</div>
.parent {
border: 1px solid red;
}
.child {
height: 100px;
width: 200px;
border: 1px solid green;
margin: 10px auto;
}
:
ध्यान रखें, कि इस तरह से केवल ब्लॉक एलिमेंट्स को, केवल क्षैतिज रूप से और केवल तभी केंद्रित किया जा सकता है, जब उनकी चौड़ाई निर्धारित की गई हो।
यदि हमें ऊपर और नीचे के मार्जिन अलग-अलग चाहिए
margin, तो हम इस तरह लिख सकते हैं:
.child {
margin: 30px auto 10px auto;
}
इसे तीन मानों के साथ भी फिर से लिखा जा सकता है: पहला
ऊपरी मार्जिन सेट करेगा, तीसरा - निचला, और
दूसरा दाएं और बाएं मार्जिन के लिए auto मान सेट करेगा:
.child {
margin: 30px auto 10px;
}
नमूने के अनुसार पेज को दोहराएं, और हरे रंग के ब्लॉक्स को उनके पैरेंट के केंद्र में व्यवस्थित करें:
