CSS वापरून Div मध्ये मजकूर अनुलंब मध्यभागी करणे

दुसरे स्क्रिप्ट उदाहरण वापरून CSS ग्रिड लेआउट वापरते . सेटिंग करून , मजकूर ग्रिड कंटेनरमध्ये क्षैतिज आणि अनुलंब दोन्ही मध्यभागी आहे. CSS ग्रिड पारंपारिक पद्धतींच्या तुलनेत वेब लेआउट डिझाइन करण्यासाठी अधिक शक्तिशाली आणि लवचिक प्रणाली देते. हे सहजपणे जटिल, प्रतिसादात्मक डिझाइन तयार करण्याची क्षमता प्रदान करते. द कमांड हे उभ्या आणि क्षैतिज मध्यभागी प्राप्त करण्याचा एक संक्षिप्त मार्ग आहे, कोड सुलभ करणे आणि वाचनीयता सुधारणे.

#box {
  height: 170px;
  width: 270px;
  background: #000;
  font-size: 48px;
  color: #FFF;
  display: flex;
  justify-content: center;
  align-items: center;
}
<div id="box">Lorem ipsum dolor sit</div>

१

#box {
  height: 170px;
  width: 270px;
  background: #000;
  font-size: 48px;
  color: #FFF;
  display: table;
}
#box::before {
  content: "";
  display: table-cell;
  vertical-align: middle;
}
#box > div {
  display: inline-block;
  vertical-align: middle;
}
<div id="box"><div>Lorem ipsum dolor sit</div></div>

#box {
  height: 170px;
  width: 270px;
  background: #000;
  font-size: 48px;
  color: #FFF;
  line-height: 170px;
  text-align: center;
}
<div id="box">Lorem ipsum dolor sit</div>

व्हर्टिकल सेंटरिंगसाठी CSS ट्रान्सफॉर्म एक्सप्लोर करत आहे

ए मध्ये मजकूर अनुलंब मध्यभागी ठेवण्यासाठी आणखी एक प्रभावी पद्धत CSS वापरत आहे मालमत्ता. एकत्र करून सह transform: translateY(-50%);, आम्ही तंतोतंत अनुलंब संरेखन साध्य करू शकतो. प्रथम, द वर सेट केले आहे संदर्भ बिंदू म्हणून कार्य करण्यासाठी. नंतर, एक मूल घटक सह मूळ कंटेनरच्या शीर्ष 50% वर स्थित आहे. शेवटी, अर्ज करणे transform: translateY(-50%); घटकाला त्याच्या स्वतःच्या उंचीच्या निम्म्याने वर हलवते, त्याला अनुलंब मध्यभागी उत्तम प्रकारे हलवते.

ही पद्धत उत्कृष्ट लवचिकता प्रदान करते आणि मजकूर आणि प्रतिमांसह विविध प्रकारच्या सामग्रीसाठी चांगले कार्य करते. डायनॅमिक सामग्रीशी व्यवहार करताना हे विशेषतः उपयुक्त आहे, कारण सामग्रीची उंची विचारात न घेता केंद्रीकरण प्रभाव सुसंगत राहतो. याव्यतिरिक्त, एकत्र करणे इतर CSS गुणधर्मांसह अधिक जटिल आणि सर्जनशील लेआउट डिझाइनसाठी अनुमती देते. या दृष्टिकोनासाठी फ्लेक्सबॉक्स किंवा ग्रिडच्या तुलनेत थोडा अधिक कोड आवश्यक असला तरी, ते घटकांच्या स्थितीवर अचूक नियंत्रण प्रदान करते.

1. div मध्ये मजकूर अनुलंब मध्यभागी ठेवण्याचा सर्वात सोपा मार्ग कोणता आहे?
2. वापरत आहे सह आणि बहुतेकदा ही सर्वात सोपी आणि प्रभावी पद्धत आहे.
3. जुन्या ब्राउझरमध्ये तुम्ही मजकूर अनुलंब मध्यभागी कसा ठेवता?
4. सह टेबल डिस्प्ले पद्धत वापरणे आणि जुन्या ब्राउझरमध्ये अनुलंब केंद्रीकरण प्राप्त करण्यात मदत करू शकते.
5. CSS ग्रिडचा वापर मजकूर उभ्या मध्यभागी ठेवण्यासाठी केला जाऊ शकतो का?
6. होय, CSS ग्रिड वापरून मजकूर उभे करू शकतो आणि .
7. मल्टी-लाइन मजकूर अनुलंब मध्यभागी करणे शक्य आहे का?
8. होय, फ्लेक्सबॉक्स किंवा CSS ग्रिड वापरून कंटेनरमध्ये बहु-लाइन मजकूर सहजपणे मध्यभागी ठेवता येतो.
9. ज्ञात कंटेनरच्या उंचीसह मजकूर अनुलंब मध्यभागी कसा ठेवता?
10. आपण सेट करू शकता मजकूराच्या मध्यभागी प्रभावीपणे कंटेनरच्या उंचीशी जुळणारी मालमत्ता.
11. कंटेनरची उंची डायनॅमिक असल्यास काय?
12. फ्लेक्सबॉक्स, ग्रिड किंवा वापरणे डायनॅमिक कंटेनर हाइट्ससह देखील प्रॉपर्टी सातत्यपूर्ण उभ्या केंद्रीकरणाची खात्री देते.
13. वापरण्यात काही कमतरता आहेत का? ?
14. प्रभावी असताना, ते पालकांकडे असणे आवश्यक आहे आणि Flexbox किंवा Grid च्या तुलनेत अंमलात आणण्यासाठी थोडे अधिक क्लिष्ट असू शकते.
15. प्रतिसादात्मक डिझाइनमध्ये तुम्ही मजकूराला अनुलंब मध्यभागी कसे ठेवता?
16. रिस्पॉन्सिव्ह डिझाईन्ससाठी फ्लेक्सबॉक्स किंवा CSS ग्रिड वापरणे अत्यंत शिफारसीय आहे, कारण ते वेगवेगळ्या स्क्रीन आकार आणि अभिमुखतेशी जुळवून घेतात.

div मधील मजकुराचे अनुलंब केंद्रीकरण करणे अनेक प्रभावी पद्धतींद्वारे पूर्ण केले जाऊ शकते. फ्लेक्सबॉक्स आणि ग्रिड सारखी आधुनिक तंत्रे सर्वात लवचिकता आणि अंमलबजावणीची सुलभता देतात. जुन्या पद्धती, जसे की टेबल डिस्प्ले आणि लाइन-उंची, तरीही विशिष्ट प्रकरणांमध्ये उपयुक्त ठरू शकतात. या भिन्न पद्धती समजून घेऊन आणि लागू करून, विकासक त्यांची सामग्री दृष्यदृष्ट्या आकर्षक आहे आणि विविध डिव्हाइसेस आणि ब्राउझरवर योग्यरित्या संरेखित आहे याची खात्री करू शकतात.