सीएसएस ग्रिड में केंद्रित

Question

मैं CSS ग्रिड के साथ एक सरल पृष्ठ बनाने का प्रयास कर रहा हूं।

मैं जो करने में विफल रहा हूं वह HTML से संबंधित ग्रिड कोशिकाओं के पाठ को केंद्र में रखना है।

मैंने चयनकर्ताओं के divअंदर और बाहर दोनों के लिए अलग-अलग सामग्री रखने की कोशिश की है left_bgऔर right_bgसीएसएस गुणों में से कुछ के साथ कोई फायदा नहीं हुआ।

मैं यह कैसे करु?

html,
body {
  margin: 0;
  padding: 0;
}

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 100vh;
  grid-gap: 0px 0px;
}

.left_bg {
  display: subgrid;
  background-color: #3498db;
  grid-column: 1 / 1;
  grid-row: 1 / 1;
  z-index: 0;
}

.right_bg {
  display: subgrid;
  background-color: #ecf0f1;
  grid-column: 2 / 2;
  grid_row: 1 / 1;
  z-index: 0;
}

.left_text {
  grid-column: 1 / 1;
  grid-row: 1 / 1;
  position: relative;
  z-index: 1;
  justify-self: center;
  font-family: Raleway;
  font-size: large;
}

.right_text {
  grid-column: 2 / 2;
  grid_row: 1 / 1;
  position: relative;
  z-index: 1;
  justify-self: center;
  font-family: Raleway;
  font-size: large;
}

<div class="container">
  <!--everything on the page-->

  <div class="left_bg">
    <!--left background color of the page-->
  </div>
</div>

<div class="right_bg">
  <!--right background color of the page-->
</div>

<div class="left_text">
  <!--left side text content-->
  <p>Review my stuff</p>

  <div class="right_text">
    <!--right side text content-->
    <p>Hire me!</p>
  </div>
</div>

Comments

कृपया लिंक w3.org/Style/Examples/007/center.en.html देखें , मुझे आशा है कि यह मददगार होगा।

— अली

Answer 1

इस उत्तर के दो मुख्य भाग हैं:

1. यह समझना कि सीएसएस ग्रिड में संरेखण कैसे काम करता है।
2. सीएसएस ग्रिड में केंद्रित करने के लिए छह तरीके।

यदि आप केवल समाधानों में रुचि रखते हैं, तो पहले खंड को छोड़ दें।

---

ग्रिड लेआउट की संरचना और क्षेत्र

यह समझने के लिए कि ग्रिड कंटेनर में केंद्र कैसे काम करता है, पहले ग्रिड लेआउट की संरचना और दायरे को समझना महत्वपूर्ण है।

एक ग्रिड कंटेनर की HTML संरचना में तीन स्तर होते हैं:

• बर्तन
• मद # जिंस
• सामग्री

ग्रिड गुणों को लागू करने के मामले में इनमें से प्रत्येक स्तर दूसरों से स्वतंत्र है।

गुंजाइश एक ग्रिड कंटेनर के एक माता पिता के बच्चे का रिश्ता तक सीमित है।

इसका मतलब है कि एक ग्रिड कंटेनर हमेशा माता-पिता होता है और एक ग्रिड आइटम हमेशा बच्चा होता है। ग्रिड गुण केवल इस रिश्ते के भीतर काम करते हैं।

बच्चों से परे एक ग्रिड कंटेनर के वंशज ग्रिड लेआउट का हिस्सा नहीं हैं और ग्रिड गुणों को स्वीकार नहीं करेंगे। (कम से कम तब तक नहीं जब तक कि यह subgridसुविधा लागू नहीं हो जाती है, जो कि ग्रिड आइटम के वंशजों को प्राथमिक कंटेनर की लाइनों का सम्मान करने की अनुमति देगा।)

यहां ऊपर वर्णित संरचना और गुंजाइश अवधारणाओं का एक उदाहरण है।

टिक-टैक-टो-जैसे ग्रिड की कल्पना करें।

article {
  display: inline-grid;
  grid-template-rows: 100px 100px 100px;
  grid-template-columns: 100px 100px 100px;
  grid-gap: 3px;
}

आप चाहते हैं कि X और O प्रत्येक सेल में केंद्रित हों।

तो आप कंटेनर स्तर पर केंद्र को लागू करते हैं:

article {
  display: inline-grid;
  grid-template-rows: 100px 100px 100px;
  grid-template-columns: 100px 100px 100px;
  grid-gap: 3px;
  justify-items: center;
}

लेकिन ग्रिड लेआउट की संरचना और दायरे के justify-itemsकारण, कंटेनर में ग्रिड आइटम होते हैं, सामग्री नहीं (कम से कम सीधे नहीं)।

article {
  display: inline-grid;
  grid-template-rows: 100px 100px 100px;
  grid-template-columns: 100px 100px 100px;
  grid-gap: 3px;
  justify-items: center;
}

section {
    border: 2px solid black;
    font-size: 3em;
}

<article>
    <section>X</section>
    <section>O</section>
    <section>X</section>
    <section>O</section>
    <section>X</section>
    <section>O</section>
    <section>X</section>
    <section>O</section>
    <section>X</section>
</article>

align-itemsइसके साथ एक ही समस्या : सामग्री एक उप-उत्पाद के रूप में केंद्रित हो सकती है, लेकिन आपने लेआउट डिज़ाइन खो दिया है।

article {
  display: inline-grid;
  grid-template-rows: 100px 100px 100px;
  grid-template-columns: 100px 100px 100px;
  grid-gap: 3px;
  justify-items: center;
  align-items: center;
}

article {
  display: inline-grid;
  grid-template-rows: 100px 100px 100px;
  grid-template-columns: 100px 100px 100px;
  grid-gap: 3px;
  justify-items: center;
  align-items: center;
}

section {
    border: 2px solid black;
    font-size: 3em;
}

<article>
    <section>X</section>
    <section>O</section>
    <section>X</section>
    <section>O</section>
    <section>X</section>
    <section>O</section>
    <section>X</section>
    <section>O</section>
    <section>X</section>
</article>

सामग्री को केंद्रित करने के लिए आपको एक अलग दृष्टिकोण लेने की आवश्यकता होती है। ग्रिड लेआउट की संरचना और दायरे का फिर से जिक्र करते हुए, आपको ग्रिड आइटम को माता-पिता और बच्चे के रूप में सामग्री का इलाज करने की आवश्यकता है।

article {
  display: inline-grid;
  grid-template-rows: 100px 100px 100px;
  grid-template-columns: 100px 100px 100px;
  grid-gap: 3px;
}

section {
  display: flex;
  justify-content: center;
  align-items: center;
  border: 2px solid black;
  font-size: 3em;
}

article {
  display: inline-grid;
  grid-template-rows: 100px 100px 100px;
  grid-template-columns: 100px 100px 100px;
  grid-gap: 3px;
}

section {
  display: flex;
  justify-content: center;
  align-items: center;
  border: 2px solid black;
  font-size: 3em;
}

<article>
  <section>X</section>
  <section>O</section>
  <section>X</section>
  <section>O</section>
  <section>X</section>
  <section>O</section>
  <section>X</section>
  <section>O</section>
  <section>X</section>
</article>

jsFiddle डेमो

---

सीएसएस ग्रिड में केंद्रित करने के लिए छह तरीके

ग्रिड आइटम और उनकी सामग्री को केंद्रित करने के लिए कई तरीके हैं।

यहाँ एक मूल 2x2 ग्रिड है:

grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 75px;
  grid-gap: 10px;
}


/* can ignore styles below; decorative only */
grid-container {
  background-color: lightyellow;
  border: 1px solid #bbb;
  padding: 10px;
}
grid-item {
  background-color: lightgreen;
  border: 1px solid #ccc;
}

<grid-container>
  <grid-item>this text should be centered</grid-item>
  <grid-item>this text should be centered</grid-item>
  <grid-item><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></grid-item>
  <grid-item><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></grid-item>
</grid-container>

flexbox

ग्रिड आइटम की सामग्री को केंद्रित करने के लिए एक सरल और आसान तरीके के लिए फ्लेक्सबॉक्स का उपयोग करें।

विशेष रूप से, फ्लेक्स कंटेनर में ग्रिड आइटम बनाते हैं।

इस पद्धति के साथ कोई संघर्ष, कल्पना उल्लंघन या अन्य समस्या नहीं है। यह साफ और मान्य है।

grid-item {
  display: flex;
  align-items: center;
  justify-content: center;
}

grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 75px;
  grid-gap: 10px;
}

grid-item {
  display: flex;            /* new */
  align-items: center;      /* new */
  justify-content: center;  /* new */
}

/* can ignore styles below; decorative only */
grid-container {
  background-color: lightyellow;
  border: 1px solid #bbb;
  padding: 10px;
}
grid-item {
  background-color: lightgreen;
  border: 1px solid #ccc;
}

<grid-container>
  <grid-item>this text should be centered</grid-item>
  <grid-item>this text should be centered</grid-item>
  <grid-item><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></grid-item>
  <grid-item><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></grid-item>
</grid-container>

पूर्ण विवरण के लिए इस पोस्ट को देखें:

• फ्लेक्सबॉक्स में ऊर्ध्वाधर और क्षैतिज रूप से केंद्र तत्वों को कैसे करें

---

जाली का नक्शा

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

grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 75px;
  grid-gap: 10px;
}

grid-item {
  display: grid;            /* new */
  align-items: center;      /* new */
  justify-items: center;    /* new */
}

/* can ignore styles below; decorative only */
grid-container {
  background-color: lightyellow;
  border: 1px solid #bbb;
  padding: 10px;
}
grid-item {
  background-color: lightgreen;
  border: 1px solid #ccc;
}

<grid-container>
  <grid-item>this text should be centered</grid-item>
  <grid-item>this text should be centered</grid-item>
  <grid-item><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></grid-item>
  <grid-item><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></grid-item>
</grid-container>

---

auto मार्जिन

margin: autoलंबवत और क्षैतिज रूप से केंद्र ग्रिड आइटम का उपयोग करें ।

grid-item {
  margin: auto;
}

grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 75px;
  grid-gap: 10px;
}

grid-item {
  margin: auto;
}

/* can ignore styles below; decorative only */
grid-container {
  background-color: lightyellow;
  border: 1px solid #bbb;
  padding: 10px;
}
grid-item {
  background-color: lightgreen;
  border: 1px solid #ccc;
}

<grid-container>
  <grid-item>this text should be centered</grid-item>
  <grid-item>this text should be centered</grid-item>
  <grid-item><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></grid-item>
  <grid-item><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></grid-item>
</grid-container>

ग्रिड आइटम की सामग्री को केंद्र में रखने के लिए आपको आइटम को ग्रिड (या फ्लेक्स) कंटेनर में बनाने की जरूरत है, अपने स्वयं के तत्वों में अनाम आइटम लपेटें ( क्योंकि वे सीधे सीएसएस द्वारा लक्षित नहीं किए जा सकते हैं ), और नए तत्वों के लिए मार्जिन लागू करें।

grid-item {
  display: flex;
}

span, img {
  margin: auto;
}

grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 75px;
  grid-gap: 10px;
}

grid-item {
  display: flex;
}

span, img {
  margin: auto;
}

/* can ignore styles below; decorative only */
grid-container {
  background-color: lightyellow;
  border: 1px solid #bbb;
  padding: 10px;
}
grid-item {
  background-color: lightgreen;
  border: 1px solid #ccc;
}

<grid-container>
  <grid-item><span>this text should be centered</span></grid-item>
  <grid-item><span>this text should be centered</span></grid-item>
  <grid-item><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></grid-item>
  <grid-item><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></grid-item>
</grid-container>

---

बॉक्स संरेखण गुण

ग्रिड आइटम संरेखित करने के लिए निम्नलिखित गुणों का उपयोग करते समय, autoऊपर दिए गए मार्जिन पर अनुभाग पढ़ें ।

• align-items
• justify-items
• align-self
• justify-self

https://www.w3.org/TR/css-align-3/#property-index

---

text-align: center

एक ग्रिड आइटम में क्षैतिज रूप से सामग्री को केंद्र में रखने के लिए, आप text-alignसंपत्ति का उपयोग कर सकते हैं।

grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 75px;
  grid-gap: 10px;
  text-align: center;  /* new */
}


/* can ignore styles below; decorative only */
grid-container {
  background-color: lightyellow;
  border: 1px solid #bbb;
  padding: 10px;
}
grid-item {
  background-color: lightgreen;
  border: 1px solid #ccc;
}

<grid-container>
  <grid-item>this text should be centered</grid-item>
  <grid-item>this text should be centered</grid-item>
  <grid-item><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></grid-item>
  <grid-item><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></grid-item>
</grid-container>

ध्यान दें कि ऊर्ध्वाधर केंद्र के लिए, vertical-align: middleकाम नहीं करेगा।

ऐसा इसलिए है क्योंकि vertical-alignसंपत्ति केवल इनलाइन और टेबल-सेल कंटेनरों पर लागू होती है।

grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 75px;
  grid-gap: 10px;
  text-align: center;     /* <--- works */
  vertical-align: middle; /* <--- fails */
}


/* can ignore styles below; decorative only */
grid-container {
  background-color: lightyellow;
  border: 1px solid #bbb;
  padding: 10px;
}
grid-item {
  background-color: lightgreen;
  border: 1px solid #ccc;
}

<grid-container>
  <grid-item>this text should be centered</grid-item>
  <grid-item>this text should be centered</grid-item>
  <grid-item><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></grid-item>
  <grid-item><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></grid-item>
</grid-container>

कोई कह सकता है कि display: inline-gridएक इनलाइन-स्तरीय कंटेनर स्थापित करता है, और यह सच होगा। तो क्यों vertical-alignग्रिड आइटम में काम नहीं करता है ?

कारण यह है कि एक ग्रिड स्वरूपण संदर्भ में , आइटम को ब्लॉक-स्तरीय तत्वों के रूप में माना जाता है।

6.1। ग्रिड आइटम प्रदर्शन

displayएक ग्रिड आइटम के मूल्य है blockified : यदि निर्दिष्ट displayएक तत्व एक ग्रिड कंटेनर पैदा करने का इन-प्रवाह बच्चे की एक इनलाइन स्तर के मूल्य है, यह अपने ब्लॉक स्तर बराबर करने के लिए गणना करता है।

एक में ब्लॉक स्वरूपण संदर्भ , कुछ vertical-alignसंपत्ति मूल रूप से के लिए डिजाइन किया गया था, ब्राउज़र एक इनलाइन स्तर के कंटेनर में एक ब्लॉक स्तर तत्व पाने की उम्मीद नहीं है। यह अमान्य HTML है।

---

सीएसएस पोजिशनिंग

अन्त में, सामान्य सीएसएस केन्द्रित समाधान है जो ग्रिड में भी काम करता है: पूर्ण स्थिति

यह ऑब्जेक्ट्स को केंद्रित करने के लिए एक अच्छी विधि है जिसे दस्तावेज़ प्रवाह से निकालने की आवश्यकता है। उदाहरण के लिए, यदि आप चाहते हैं:

• छवि पर केंद्र पाठ , या
• आवश्यक प्रपत्र फ़ील्ड के ऊपर तारांकन चिह्न (*) रखें

बस position: absoluteकेंद्रित होने वाले तत्व पर सेट करें , और position: relativeपूर्वज पर जो युक्त ब्लॉक के रूप में काम करेगा (यह आमतौर पर माता-पिता है)। कुछ इस तरह:

grid-item {
  position: relative;
  text-align: center;
}

span {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 75px;
  grid-gap: 10px;
}

grid-item {
  position: relative;
  text-align: center;
}

span, img {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}


/* can ignore styles below; decorative only */

grid-container {
  background-color: lightyellow;
  border: 1px solid #bbb;
  padding: 10px;
}

grid-item {
  background-color: lightgreen;
  border: 1px solid #ccc;
}

<grid-container>
  <grid-item><span>this text should be centered</span></grid-item>
  <grid-item><span>this text should be centered</span></grid-item>
  <grid-item><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></grid-item>
  <grid-item><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></grid-item>
</grid-container>

यह विधि कैसे काम करती है, इसके लिए यहां एक पूर्ण विवरण दिया गया है:

• तत्व केंद्रित नहीं रहेगा, खासकर जब स्क्रीन को फिर से आकार देना

यहाँ ग्रिड कल्पना में पूर्ण स्थिति पर अनुभाग है:

• https://www.w3.org/TR/css3-grid-layout/#abspos

Comments

हाय माइकल, मैं सोच रहा था कि क्या यह संभव है कि पंक्ति में सबसे छोटे स्तंभ के आकार के लिए प्रत्येक स्तंभ को आकार देने के लिए ग्रिड का उपयोग किया जाए?

— कोडेसे

@ TheCodesee, यह संभव हो सकता है, आपकी सभी आवश्यकताओं के आधार पर .. क्या आपके पास एक कोड नमूना है? या सभी विवरणों के साथ एक नया प्रश्न पोस्ट करने पर विचार करें।

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

है grid-containerऔर grid-itemकर रहे हैं HTML टैग?

— diEcho

वे कस्टम HTML टैग हैं। आप अपने स्वयं के टैग बना सकते हैं, जैसा कि मैंने इस डेमो के लिए किया था। stackoverflow.com/q/36380449/3597276 @ pro.mean

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

यह एक अद्भुत उत्तर है, धन्यवाद। यह मुझे एहसास हुआ, आपके दो पहले उदाहरणों में, कि बीच में flexऔर grid, align-itemsएक ही रहता है लेकिन किसी कारण से justify-contentबन जाता हैjustify-items

— वाह

Answer 2

आप अपने पाठ को केंद्र में लाने के लिए फ्लेक्सबॉक्स का उपयोग कर सकते हैं। वैसे अतिरिक्त कंटेनरों की कोई आवश्यकता नहीं है क्योंकि टेक्स्ट को गुमनाम फ्लेक्स आइटम माना जाता है।

से flexbox चश्मा :

फ्लेक्स कंटेनर का प्रत्येक इन-फ्लो बच्चा एक फ्लेक्स आइटम बन जाता है , और टेक्स्ट का प्रत्येक सन्निहित भाग जो सीधे एक फ्लेक्स कंटेनर के अंदर होता है, एक गुमनाम फ्लेक्स आइटम में लपेटा जाता है । हालांकि, एक अनाम फ्लेक्स आइटम जिसमें केवल श्वेत स्थान होता है (यानी जो white-spaceगुण संपत्ति से प्रभावित हो सकते हैं) प्रदान नहीं किया जाता है (जैसे कि यह थे display:none)।

तो बस फ्लेक्स कंटेनर ( display: flex) के रूप में ग्रिड आइटम बनाएं , और लंबवत और क्षैतिज रूप से दोनों को जोड़ने align-items: centerऔर जोड़ने के justify-content: centerलिए।

HTML और CSS का अनुकूलन भी किया:

html,
body {
  margin: 0;
  padding: 0;
}

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 100vh;
  
  font-family: Raleway;
  font-size: large;
}

.left_bg,
.right_bg {
  display: flex;
  align-items: center;
  justify-content: center;
}

.left_bg {
  background-color: #3498db;
}

.right_bg {
  background-color: #ecf0f1;
}

<div class="container">
  <div class="left_bg">Review my stuff</div>
  <div class="right_bg">Hire me!</div>
</div>

Answer 3

फ्लेक्स का उपयोग करने की कोशिश भी न करें; सीएसएस ग्रिड के साथ रहो !! :)

https://jsfiddle.net/ctt3bqr0/

justify-self: center;
align-self: center;

यहाँ केंद्र का काम कर रहा है।

यदि आप किसी ऐसी चीज़ को केंद्र में रखना चाहते हैं जो कि divग्रिड सेल के अंदर हो तो आपको काम करने के लिए नेस्टेड ग्रिड को परिभाषित करने की आवश्यकता होती है। (कृपया वहां दिखाए गए दोनों उदाहरणों को फिडल देखें।)

https://css-tricks.com/snippets/css/complete-guide-grid/

चीयर्स!

Comments

मैं नेस्टेड ग्रिड के बारे में सोच रहा था। मुझे यह दिखाने के लिए धन्यवाद कि मैंने इसका अनुमान कैसे लगाया। तो आपको लगता है कि फ्लेक्स को ग्रिड से बचना चाहिए या गठबंधन करना ठीक है?

— चुकंदर

गठबंधन करने के लिए ठीक है, लेकिन आपको यह सुनिश्चित करने की आवश्यकता है कि आप नौकरी के लिए सही उपकरण का उपयोग कर रहे हैं। कुछ समय निकालें और राहेल की प्रस्तुति देखें, जो सीएसएस ग्रिड के विषय में आपके लिए बहुत कुछ स्पष्ट करेगा। youtu.be/3vJE3bVoF-Q

— कोनराड अल्ब्रेक्ट

इस दृष्टिकोण के साथ समस्या तब होती है जब आप ग्रिड आइटम पर सीमाओं का उपयोग कर रहे हैं ...

— एंड्रयू

इससे छोटा किया जा सकता है place-self: center;।

— डेवोनडाहोन

Answer 4

CSS स्थान-आइटम आशुलिपि गुण क्रमशः संरेखित-आइटम और औचित्य-आइटम गुण सेट करते हैं। यदि दूसरा मान सेट नहीं है, तो इसके लिए पहला मान भी उपयोग किया जाता है।

.parent {
  display: grid;
  place-items: center;
}

Comments

place-itemsवर्तमान में किनारे पर समर्थित नहीं है

— कोनराड अल्ब्रेक्ट

Answer 5

फ्लेक्स का उपयोग करके देखें:

प्लंकर डेमो: https://plnkr.co/edit/nk02ojKuXD2tAqZiWw9

/* Styles go here */

html,
body {
  margin: 0;
  padding: 0;
}

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 100vh;
  grid-gap: 0px 0px;
}

.left_bg {
  background-color: #3498db;
  grid-column: 1 / 1;
  grid-row: 1 / 1;
  z-index: 0;
  display: flex;
  justify-content: center;
  align-items: center;

}

.right_bg {
  background-color: #ecf0f1;
  grid-column: 2 / 2;
  grid_row: 1 / 1;
  z-index: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.text {
  font-family: Raleway;
  font-size: large;
  text-align: center;
}

एचटीएमएल

    <div class="container">
  <!--everything on the page-->

  <div class="left_bg">
    <!--left background color of the page-->
    <div class="text">
      <!--left side text content-->
      <p>Review my stuff</p>
    </div>
  </div>

  <div class="right_bg">
    <!--right background color of the page-->
    <div class="text">
      <!--right side text content-->
      <p>Hire me!</p>
    </div>
  </div>
</div>

Answer 6

आप यह चाहते हैं?

html,
body {
  margin: 0;
  padding: 0;
}

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 100vh;
  grid-gap: 0px 0px;
}

.left_bg {
  display: subgrid;
  background-color: #3498db;
  grid-column: 1 / 1;
  grid-row: 1 / 1;
  z-index: 0;
}

.right_bg {
  display: subgrid;
  background-color: #ecf0f1;
  grid-column: 2 / 2;
  grid_row: 1 / 1;
  z-index: 0;
}

.text {
  font-family: Raleway;
  font-size: large;
  text-align: center;
}

<div class="container">
  <!--everything on the page-->

  <div class="left_bg">
    <!--left background color of the page-->
    <div class="text">
      <!--left side text content-->
      <p>Review my stuff</p>
    </div>
  </div>

  <div class="right_bg">
    <!--right background color of the page-->
    <div class="text">
      <!--right side text content-->
      <p>Hire me!</p>
    </div>
  </div>
</div>

Comments

काफी नहीं। पाठ को लंबवत रूप से भी संरेखित किया जाना चाहिए।

— चुकंदर 21

उपयोग.text{ font-family: Raleway; font-size: large; text-align: center; -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); }

— Renato siqueira

Answer 7

मुझे पता है कि यह सवाल कुछ साल पुराना है, लेकिन मुझे यह जानकर आश्चर्य हुआ कि किसी ने सुझाव नहीं दिया:

   text-align: center;

यह औचित्य-सामग्री की तुलना में अधिक सार्वभौमिक संपत्ति है, और निश्चित रूप से ग्रिड के लिए अद्वितीय नहीं है, लेकिन मुझे लगता है कि जब पाठ के साथ काम करते हैं, जो यह सवाल विशेष रूप से पूछता है, कि यह अंतरिक्ष को प्रभावित करने के साथ पाठ को केंद्र में संरेखित करता है ग्रिड आइटम, या ऊर्ध्वाधर केंद्र के बीच। यह क्षैतिज रूप से पाठ को केंद्र में रखता है जहाँ इसकी ऊर्ध्वाधर अक्ष पर खड़ा होता है। मुझे यह भी लगता है कि जटिलता की एक परत को हटा दें जो कि औचित्य-सामग्री और संरेखित-आइटम जोड़ता है। औचित्य-सामग्री और संरेखित-आइटम संपूर्ण ग्रिड आइटम या आइटम को प्रभावित करता है, पाठ-संरेखण उस कंटेनर को प्रभावित किए बिना पाठ को केंद्र में रखता है जो आशा है कि आपकी मदद करता है।