सीएसएस लेआउट - होरिज़ोंटल और वर्टिकल जस्टिफाइ

एलिमेंट मध्यस्थ स्थान पर

स्थानांतरित और अनुक्रमित मध्यस्थ स्थान पर रखे गए एलिमेंट

एलिमेंट को मध्यस्थ स्थान पर रखा जाता है

बॉक्स एलिमेंट (जैसे <div>) को आड़ा मध्यस्थ स्थान पर रखने के लिए मार्गिन: ऑटो;

एलिमेंट की वाइड्थ को सेट करने से इसे कंटेनर के किनारों तक फैलने से रोका जाएगा。

तो, एलिमेंट निर्धारित वाइड्थ को ले लेगा, शेष जगह दोनों बाहरी अन्तरालों के बीच समान रूप से वितरित होगी:

यह div एलिमेंट मध्यस्थ स्थान पर है

इंस्टांस

.center {
  मार्गिन: ऑटो;
  वाइड्थ: 50％;
  बॉर्डर: 3px सॉलिड ग्रीन;
  padding: 20px;
}

अपने आप इसे प्रयोग करें

ध्यान:यदि नहीं सेट किया गया वाइड्थ प्रॉपर्टी (या इसे 100％ सेट करें), तो मध्यस्थ स्थान पर रखा जाना असफल होगा。

टेक्स्ट को मध्यस्थ स्थान पर रखा जाता है

यदि आप केवल एलिमेंट के अंदर टेक्स्ट को मध्यस्थ स्थान पर रखना चाहते हैं, तो text-align: center;:

यह टेक्स्ट मध्यस्थ स्थान पर है

इंस्टांस

.center {
  text-align: center;
  बॉर्डर: 3px सॉलिड ग्रीन;
}

अपने आप इसे प्रयोग करें

अभिमत:टेक्स्ट को कैसे जस्ता करने के लिए अधिक उदाहरणों के लिए देखें सीएसएस टेक्स्ट इस चैप्टर

चित्र को मध्यस्थ स्थान पर रखा जाता है

यदि आप चित्र को मध्यस्थ स्थान पर रखना चाहते हैं, तो बाहरी अन्तराल को सेट करें autoऔर इसे ब्लॉक एलिमेंट के रूप में सेट करें:

इंस्टांस

img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 40%;
}

अपने आप इसे प्रयोग करें

बाईं और दायाँ अनुरूपता - position का उपयोग करें

एलिमेंट को अनुरूप करने का एक तरीका है position: absolute; :

यह div दायाँ अनुरूप है।

इंस्टांस

.right {
  position: absolute;
  right: 0px;
  width: 300px;
  border: 3px solid #73AD21;
  padding: 20px;
}

अपने आप इसे प्रयोग करें

ध्यान:अभिन्न पोजीशन के एलिमेंट नोर्मल स्ट्रीम से हट जाएंगे और एलिमेंटों के ओवरलैपिंग हो सकता है।

बाईं और दायाँ अनुरूपता - float का उपयोग करें

एलिमेंट को अनुरूप करने के एक अन्य तरीका है float गुण:

इंस्टांस

.right {
  float: right;
  width: 300px;
  border: 3px solid #73AD21;
  padding: 10px;
}

अपने आप इसे प्रयोग करें

ध्यान:यदि एक एलिमेंट अपने प्रवेश एलिमेंट से ऊपरी है और यह फ्लॉटिंग है, तो यह अपने कंटेनर से बाहर निकल सकता है। आप clearfix hack जोड़ सकते हैं (नीचे के उदाहरण को देखें).

clearfix Hack

तब हम प्रवेश एलिमेंट को overflow: auto;इसे समाधान करने के लिए

इंस्टांस

.clearfix {
  overflow: auto;
}

अपने आप इसे प्रयोग करें

ऊपरी अनुरूपता - padding का उपयोग करें

CSS में एलिमेंट को ऊपरी अनुरूप करने के लिए कई तरीके हैं। एक सरल समाधान है

मैं ऊपरी अनुरूप हूँ।

इंस्टांस

.center {
  padding: 70px 0;
  बॉर्डर: 3px सॉलिड ग्रीन;
}

अपने आप इसे प्रयोग करें

अगर आप ऊपरी और अनुरूपता एक साथ करना चाहते हैं, तो padding और text-align: center;:

मैं आड़े और ऊर्ध्व बीच से केंद्रीत हूँ।

इंस्टांस

.center {
  padding: 70px 0;
  बॉर्डर: 3px सॉलिड ग्रीन;
  text-align: center;
}

अपने आप इसे प्रयोग करें

ऊपरी अनुरूपता - line-height का उपयोग करें

एक अन्य तकनीक हैइसका मानसमान है height गुण के मान का line-height गुण:

मैं आड़े और ऊर्ध्व बीच से केंद्रीत हूँ।

इंस्टांस

.center {
  line-height: 200px;
  हाईट: 200px;
  बॉर्डर: 3px सॉलिड ग्रीन;
  text-align: center;
}
/* अगर कई पंक्तियों का टेक्स्ट है, तो नीचे दिए गए कोड को जोड़ें: */
.center p {
  line-height: 1.5;
  display: inline-block;
  vertical-align: middle;
}

अपने आप इसे प्रयोग करें

ऊपरी अनुरूपता - position और transform का उपयोग करें

अगर आपका चयन padding और line-heightइसके बजाय, एक अन्य समाधान है position और transform गुण:

मैं आड़े और ऊर्ध्व बीच से केंद्रीत हूँ।

इंस्टांस

.center { 
  हाईट: 200px;
  position: relative;
  बॉर्डर: 3px सॉलिड ग्रीन; 
}
.center p {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: प्रभावित करें (-50%, -50%);
}

अपने आप इसे प्रयोग करें

अभिमत:आपको यहाँ 2D ट्रांसफॉर्मेशन इस चाप में transform एट्रिब्यूट के बारे में अधिक जानकारी सीखें

अनुकूल आड़े बीच - Flexbox का इस्तेमाल करना

आपको फ्लेक्सबॉक्स के द्वारा सामग्री को केंद्रीत करने के लिए भी इस्तेमाल किया जा सकता है।ध्यान दें कि IE10 और उससे पहले की संस्करण फ्लेक्सबॉक्स को समर्थन नहीं करते हैं:

मैं आड़े और ऊर्ध्व बीच से केंद्रीत हूँ।

इंस्टांस

.center {
  डिस्प्ले: फ्लेक्स;
  जस्टीफाइ: सेंटर;
  अलाइन-आइटम्स: सेंटर;
  हाईट: 200px;
  बॉर्डर: 3px सॉलिड ग्रीन; 
}

अपने आप इसे प्रयोग करें

अभिमत:आपको मेरे CSS फ्लेक्सबॉक्स इस चाप में आपको Flexbox के बारे में अधिक जानकारी मिलेगी。