CSS के साथ अपने वेब पेज में टेक्स्ट को सेंटर अलाइन कैसे करें

यदि आप फ़्रंट-एंड डेवलपमेंट के लिए नए हैं, तो आपके ब्राउज़र में एक सादा HTML दस्तावेज़ क्या पैदा करता है और एक आधुनिक वेबसाइट कैसी दिखती है, इसकी वास्तविकता के बीच असमानता बहुत कठिन लग सकती है।

पहली चीज़ जो आप देख सकते हैं, वह यह है कि आपका सभी HTML टेक्स्ट डिफ़ॉल्ट रूप से आपके वेबपेज के बाईं ओर संरेखित है। हालांकि HTML में आपके टेक्स्ट को केंद्र में संरेखित करने का कोई व्यावहारिक तरीका नहीं है, लेकिन एक CSS गुण है जो इसे आसानी से पूरा कर सकता है।

इस ट्यूटोरियल लेख में, आप सीखेंगे कि CSS का उपयोग करके वेब पेजों पर टेक्स्ट को सेंटर अलाइन कैसे करें।

CSS टेक्स्ट-एलाइन प्रॉपर्टी क्या है?

CSS टेक्स्ट-एलाइन प्रॉपर्टी एक CSS फीचर है जिसका उपयोग वेब पेज पर टेक्स्ट को व्यवस्थित करने के लिए किया जाता है। इस गुण को उस लेआउट के आधार पर कई मानों में से एक सौंपा जा सकता है जिसे आप अपने वेब पेज पर प्राप्त करना चाहते हैं। CSS टेक्स्ट-एलाइन प्रॉपर्टी को अक्सर निम्नलिखित मान असाइन किए जाते हैं।

संबंधित: सीएसएस टेक्स्ट के साथ चीजें संरेखित करें संपत्ति को संरेखित करें

  • लेफ्ट (वेब ​​पेज के बाईं ओर टेक्स्ट को अलाइन करता है और यह डिफॉल्ट अलाइनमेंट भी है)
  • दाएं (वेब ​​पेज के दाईं ओर टेक्स्ट संरेखित करता है)
  • केंद्र (पाठ को वेब पेज के केंद्र में संरेखित करता है)
  • औचित्य (सुनिश्चित करें कि पाठ की प्रत्येक पंक्ति की चौड़ाई समान है)

वेब पेज पर टेक्स्ट को सेंटर अलाइन करना

यह देखते हुए कि अधिकांश भाषाएं बाएं से दाएं पढ़ी जाती हैं, डिफ़ॉल्ट रूप से टेक्स्ट को वेब पेज के बाईं ओर संरेखित करना व्यावहारिक है। हालाँकि, ऐसे उदाहरण होंगे जब पाठ को केंद्र में संरेखित करना अधिक व्यावहारिक दृष्टिकोण है (जैसे शीर्षक और उपशीर्षक)।

सरल HTML वेब पेज उदाहरण

 
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Center Alignment</title>
</head>

<body>
<div class="container">
<div id="box-1">
<h1>Heading</h1>
<h3>Lorem ipsum, dolor sit amet consectetur adipisicing </h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum distinctio eum ex,
repellat beatae in quasi eligendi enim dolorem ipsam. Ab necessitatibus sunt
commodi ad fugit soluta provident dolorem distinctio?
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum distinctio eum ex,
repellat beatae in quasi eligendi enim dolorem ipsam. Ab necessitatibus sunt
commodi ad fugit soluta provident dolorem distinctio?</p>
</div>
<div id="box-2">
<h1>Heading</h1>
<h3>Lorem ipsum, dolor sit amet consectetur adipisicing </h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum distinctio eum ex,
repellat beatae in quasi eligendi enim dolorem ipsam. Ab necessitatibus sunt
commodi ad fugit soluta provident dolorem distinctio?
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum distinctio eum ex,
repellat beatae in quasi eligendi enim dolorem ipsam. Ab necessitatibus sunt
commodi ad fugit soluta provident dolorem distinctio?</p>
</div>
</div>
</body>
</html>

ऊपर दी गई HTML फ़ाइल आपके ब्राउज़र में निम्न वेब पेज उत्पन्न करेगी।

जैसा कि आप ऊपर दिए गए आउटपुट से देख सकते हैं, सभी टेक्स्ट बाईं ओर संरेखित हैं। ऊपर दिए गए टेक्स्ट को मध्य संरेखित करने के लिए आप कई विधियों का उपयोग कर सकते हैं, लेकिन पहले, आपको यह पहचानने की आवश्यकता है कि आप किस पाठ को केंद्र में संरेखित करना चाहते हैं।

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

सभी टेक्स्ट उदाहरण को केंद्र में संरेखित करना


.container{
text-align: center;
}

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

जैसा कि आप देख सकते हैं, वेब पेज पर सभी टेक्स्ट अब केंद्र-संरेखित हैं। एकमात्र समस्या यह है कि पैराग्राफ बेहतर दिखाई देगा और बाईं ओर संरेखित होने पर अधिक पठनीय होगा। ऐसे उदाहरणों में जब आप किसी वेब पेज पर केवल कुछ टेक्स्ट को केंद्र में संरेखित करना चाहते हैं, तो आप कक्षाओं और आईडी के बजाय चयनकर्ताओं के रूप में HTML तत्वों का उपयोग कर सकते हैं।

संबंधित: CSS चयनकर्ताओं का उपयोग करके वेब पेज के भाग को कैसे लक्षित करें

केंद्र संरेखण विशिष्ट पाठ उदाहरण


h1, h3{
text-align: center;
}

उपरोक्त कोड वेब पेज पर केवल h1 और h3 तत्वों को लक्षित करता है, और आपके ब्राउज़र में निम्न आउटपुट उत्पन्न करेगा।

एक वेब पेज पर एक डिव को केंद्र में संरेखित करना

एक और प्रवृत्ति जो आप आधुनिक वेबसाइटों में देख सकते हैं, वह यह है कि पाठ किनारों तक नहीं जाता है। यह उन उदाहरणों में से एक है जब पैरेंट डिव का उपयोग किया जाता है। हालांकि सीएसएस में कोई डिव एलाइन प्रॉपर्टी नहीं है, मार्जिन प्रॉपर्टी का इस्तेमाल पैरेंट डिव और उसकी सामग्री को सेंटर एलाइन करने के लिए किया जा सकता है।

केंद्र संरेखण डिव उदाहरण


.container{
max-width: 920px;
margin: auto;
}

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

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

जैसा कि आप ऊपर की छवि से देख सकते हैं, टेक्स्ट की चौड़ाई को घटाकर 920px कर दिया गया है, और टेक्स्ट को घेरने वाला अदृश्य कंटेनर अब मार्जिन प्रॉपर्टी के कारण वेबपेज के केंद्र में है।

मार्जिन संपत्ति कैसे काम करती है?

मार्जिन संपत्ति को तीन अलग-अलग मूल्यों का संयोजन सौंपा जा सकता है। जब CSS गुण को चार मान असाइन किए जाते हैं, तो प्रत्येक मान HTML तत्व के चार पक्षों में से किसी एक को लक्षित करेगा।

जब दो मान मार्जिन प्रॉपर्टी को असाइन किए जाते हैं, तो पहला मान HTML एलीमेंट के ऊपर और नीचे के पक्षों को लक्षित करेगा और दूसरा मान HTML एलीमेंट के बाएँ और दाएँ पक्षों को लक्षित करेगा।

ऊपर के उदाहरण में, मार्जिन प्रॉपर्टी को केवल एक मान दिया गया है, जिसका अर्थ है कि यह HTML तत्व के बाएँ और दाएँ पक्ष को लक्षित करता है (जो इस मामले में पैरेंट <div> टैग है)।

मार्जिन प्रॉपर्टी को आमतौर पर वे मान दिए जाते हैं जो पिक्सल यूनिट में होते हैं या, जैसा कि ऊपर दिए गए उदाहरण में, ऑटो वैल्यू है। स्वतः मान सुनिश्चित करता है कि HTML तत्व के दोनों ओर उपयोग किया गया मार्जिन बराबर है। यह प्रभावी रूप से पेरेंट डिव एलिमेंट (और टेक्स्ट के विस्तार द्वारा) को वेब पेज के केंद्र में रखता है, जो आपको एक ऐसा लेआउट प्रदान करता है जो आधुनिक वेब पेजों को दर्शाता है।

अब आप क्या कर सकते हैं

यह ट्यूटोरियल लेख आपको कई चीजें सिखाता है:

  • वेब पेज पर टेक्स्ट को केंद्र में रखने के लिए टेक्स्ट-एलाइन प्रॉपर्टी का उपयोग कैसे करें।
  • <div> टैग या अन्य HTML तत्वों द्वारा संलग्न ग्रंथों के विभिन्न समूहों को केंद्र में कैसे संरेखित करें।
  • पैरेंट डिव पर मार्जिन प्रॉपर्टी का उपयोग करके टेक्स्ट के समूह को कैसे केन्द्रित करें।

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

CSS ग्रिड आपके वेब पेजों के लिए एक द्वि-आयामी (पंक्तियाँ और कॉलम) लेआउट संरचना प्रदान करता है, एक फ्रेमवर्क के साथ जो सीखने और उपयोग करने में आसान है।