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

व्हर्टिकल सेंटरिंगसाठी प्रगत CSS तंत्र

तिसऱ्या स्क्रिप्टमध्ये, आम्ही टेबल डिस्प्ले पद्धत वापरतो. सेटिंग display: table; कंटेनरवर आणि ७ सह तयार केलेल्या छद्म-घटकावर ::before आम्हाला वापरण्याची परवानगी देते ९ मालमत्ता. ही पद्धत टेबल सेलच्या वर्तनाची नक्कल करते, ज्यामुळे सामग्रीला अनुलंब मध्यभागी ठेवणे शक्य होते. आधुनिक वेब डिझाईनमध्ये हा दृष्टिकोन कमी प्रमाणात वापरला जात असला तरी, जुन्या ब्राउझरशी सुसंगतता राखण्यासाठी किंवा लीगेसी कोड हाताळताना ते उपयुक्त ठरू शकते. हे नवीन लेआउट सिस्टमवर अवलंबून न राहता सामग्री केंद्रस्थानी ठेवण्याचा एक विश्वासार्ह मार्ग प्रदान करते.

चौथे स्क्रिप्ट उदाहरण वापरते line-height मालमत्ता. सेट करून line-height कंटेनरच्या उंचीइतका, मजकूर अनुलंब मध्यभागी आहे. हे तंत्र एकल-ओळ मजकुरासाठी सरळ आणि प्रभावी आहे. तथापि, ते बहु-लाइन मजकूर किंवा डायनॅमिक सामग्रीसाठी योग्य असू शकत नाही जेथे कंटेनरची उंची बदलू शकते. त्याच्या मर्यादा असूनही, द line-height साध्या परिस्थितींमध्ये मजकूर अनुलंब केंद्रीत करण्यासाठी पद्धत हा एक जलद आणि सोपा उपाय आहे.

व्हर्टिकल सेंटरिंगसाठी फ्लेक्सबॉक्स वापरणे

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>

व्हर्टिकल सेंटरिंगसाठी ग्रिड वापरणे

CSS ग्रिड

१

वर्टिकल सेंटरिंगसाठी टेबल डिस्प्ले वापरणे

CSS टेबल डिस्प्ले

#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>

अनुलंब केंद्रीकरणासाठी रेषेची उंची वापरणे

CSS लाईनची उंची

#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 मध्ये व्हर्टिकल सेंटरिंगबद्दल सामान्य प्रश्न

1. div मध्ये मजकूर अनुलंब मध्यभागी ठेवण्याचा सर्वात सोपा मार्ग कोणता आहे?
2. वापरत आहे display: flex; सह १ आणि align-items: center; बहुतेकदा ही सर्वात सोपी आणि प्रभावी पद्धत आहे.
3. जुन्या ब्राउझरमध्ये तुम्ही मजकूर अनुलंब मध्यभागी कसा ठेवता?
4. सह टेबल डिस्प्ले पद्धत वापरणे display: table; आणि ९ जुन्या ब्राउझरमध्ये अनुलंब केंद्रीकरण प्राप्त करण्यात मदत करू शकते.
5. CSS ग्रिडचा वापर मजकूर उभ्या मध्यभागी ठेवण्यासाठी केला जाऊ शकतो का?
6. होय, CSS ग्रिड वापरून मजकूर उभे करू शकतो display: grid; आणि place-items: center;.
7. मल्टी-लाइन मजकूर अनुलंब मध्यभागी करणे शक्य आहे का?
8. होय, फ्लेक्सबॉक्स किंवा CSS ग्रिड वापरून कंटेनरमध्ये बहु-लाइन मजकूर सहजपणे मध्यभागी ठेवता येतो.
9. ज्ञात कंटेनरच्या उंचीसह मजकूर अनुलंब मध्यभागी कसा ठेवता?
10. आपण सेट करू शकता line-height मजकूराच्या मध्यभागी प्रभावीपणे कंटेनरच्या उंचीशी जुळणारी मालमत्ता.
11. कंटेनरची उंची डायनॅमिक असल्यास काय?
12. फ्लेक्सबॉक्स, ग्रिड किंवा वापरणे transform डायनॅमिक कंटेनर हाइट्ससह देखील प्रॉपर्टी सातत्यपूर्ण उभ्या केंद्रीकरणाची खात्री देते.
13. वापरण्यात काही कमतरता आहेत का? transform: translateY(-50%);?
14. प्रभावी असताना, ते पालकांकडे असणे आवश्यक आहे १८ आणि Flexbox किंवा Grid च्या तुलनेत अंमलात आणण्यासाठी थोडे अधिक क्लिष्ट असू शकते.
15. प्रतिसादात्मक डिझाइनमध्ये तुम्ही मजकूराला अनुलंब मध्यभागी कसे ठेवता?
16. रिस्पॉन्सिव्ह डिझाईन्ससाठी फ्लेक्सबॉक्स किंवा CSS ग्रिड वापरणे अत्यंत शिफारसीय आहे, कारण ते वेगवेगळ्या स्क्रीन आकार आणि अभिमुखतेशी जुळवून घेतात.

वर्टिकल सेंटरिंगवरील अंतिम विचार

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