Aligning text with CSS in html hindi
सीएसएस स्टाइलशीट का एचटीएमएल वेब पेज में उपयोग करके वेब पेज टेक्स्ट को बोल्ड, इटैलिक, अंडरलाइन, फॉर्मेट, और मल्टीप्ल सीएसएस इफ़ेक्ट और प्रॉपर्टीज को अप्लाई करना और किसी भी वेब पेज कंटेंट को ग्रफिकल्ली और प्रोफेशनली रिप्रेजेंट करने का एक कमर्सिअल तरीका है। सीएसएस आपके बोरिंग वेब पेज को अधिक अट्रैक्टिव और कमर्शियल फॉर्मेट बिहैवियर प्रदान करता है. आप सीएसएस स्क्रिप्टिंग लैंग्वेज को सिख कर एक कमर्शियल और एडवांस्ड वेब पेज डिज़ाइन या डेवलप कर सकते है.
Underlining text with CSS in HTML web page.
Text alignment with CSS.
text-align – सीएसएस टेक्स्ट-अलाइन प्रॉपर्टीज का इस्तेमाल कर आप अपने पैराग्राफ में कंटेनिंग टेक्स्ट एलिमेंट के अंदर टेक्स्ट के हॉरिजॉन्टल बिहैवियर को कण्ट्रोल और मैनेज कर सकते है।
CSS text-align properties.
- left – किसी भी सीएसएस पैराग्राफ टेक्स्ट को उसके कंटेनर के लेफ्ट आर्डर में अलाइन करता है।
- center – किसी भी सीएसएस पैराग्राफ टेक्स्ट को उसके कंटेनर के अंदर सेंटर आर्डर में अलाइन करता है।
- right – किसी भी सीएसएस टेक्स्ट को उसके कंटेनर के राइट आर्डर में अलाइन करता है।
- justify – किसी भी सीएसएस टेक्स्ट को उसके कंटेनर की दोनों तरफ से चौड़ाई में फ़िट करने के लिए दोनों लेफ्ट एंड राइट आर्डर में स्प्रेड करता है, यह लेफ्ट एंड राइट दोनों साइड में टेक्स्ट को जस्टिफाई कर अलाइन करता है.
CSS text alignment examples.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Multiple Css Text Alignment Properties</title>
<style>
.left-align {
text-align: left;
}
.center-align {
text-align: center;
}
.right-align {
text-align: right;
}
.justify-align {
text-align: justify;
}
</style>
</head>
<body>
<p class=”left-align”>The Text Aligned In Left Direction</p>
<p class=”center-align”>The Text Aligned In Center Direction</p>
<p class=”right-align”>The Text Aligned In Right Direction</p>
<p class=”justify-align”>The Text Aligned In Justify Direction. It Fit Text From Left And Right Direction From Both Side</p>
</body>
</html>
CSS vertical text alignment.
vertical-align – किसी भी सीएसएस टेक्स्ट को इनलाइन या इनलाइन-ब्लॉक एलिमेंट के उनके लाइन बॉक्स के वर्टीकल टेक्स्ट एलाइनमेंट बेहेवियर को कण्ट्रोल और मैनेज करता है।
CSS vertical text-align properties.
- baseline – यह प्रॉपर्टीज किसी भी सीएसएस एलिमेंट की बेसलाइन को उसके पैरेंट की बेसलाइन के साथ डिफ़ॉल्ट प्रीव्यू कर अलाइन करता है ।
- top – किसी भी सीएसएस एलिमेंट के टॉप को लाइन बॉक्स के टॉप के साथ अलाइन कर प्रीव्यू करता है।
- center – किसी भी सीएसएस एलिमेंट के वर्टीकल मिंडपॉइन्ट को लाइन बॉक्स के मीडपोइन्ट के साथ प्रीव्यू कर अलाइन करता है।
- bottom – किसी भी सीएसएस एलिमेंट के बॉटम पोरशन को लाइन बॉक्स के बॉटम हिस्से के साथ प्रीव्यू कर अलाइन करता है।
CSS vertical text alignment example.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Css Vertical Alignment Properties</title>
<style>
.container {
color:red;
font-size:2em;
height: 80px;
border: 2px solid #111;
line-height: 90px;
text-align:center;
}
.baseline {
vertical-align: baseline;
}
.top {
vertical-align: top;
}
.middle {
vertical-align: middle;
}
.bottom {
vertical-align: bottom;
}
</style>
</head>
<body>
<div class=”container”>
<span class=”baseline”>Baseline Properties,</span>
<span class=”top”>Top Properties,</span>
<span class=”middle”>Middle Properties,</span>
<span class=”bottom”>Bottom Properties,</span>
</div>
</body>
</html>
Text Alignment in CSS Flexbox.
सीएसएस में फ्लेक्सबॉक्स एलिमेंट फीचर्स का उपयोग करके, टेक्स्ट एलाइनमेंट को अतिरिक्त सीएसएस प्रॉपर्टीज के साथ कण्ट्रोल और मैनेज किया जाता है.
- align-items – अलाइन-आइटम सीएसएस फ्लेक्सबोक्स में क्रॉस एक्सिस के साथ फ्लेक्स टेक्स्ट आइटम या कंटेंट को अलाइन करता है।
- justify-content – यह फ्लेक्सबोक्स प्रॉपर्टीज सीएसएस टेक्स्ट को मैन एक्सिस के साथ फ्लेक्स एलिमेंट को अलाइन करता है।
Flexbox Alignment Example in CSS.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Css Flexbox Alignment Properties</title>
<style>
.flex-container {
color:blue;
font-size:3em;
display: flex;
height: 90px;
border: 3px solid #111;
justify-content: center; /* it Aligns flex container items horizontally order*/
align-items: center; /* it Aligns css flex container items vertically order */
}
</style>
</head>
<body>
<div class=”flex-container”>
<p>Let Align Css Text Alignment With Flex Properties</p>
</div>
</body>
</html>
Text alignment in grid layout in CSS.
सीएसएस में ग्रिड लेआउट आर्डर में टेक्स्ट एलाइनमेंट प्रॉपर्टीज का उपयोग करके टेक्स्ट डिस्प्ले आर्डर को कण्ट्रोल और मैनेज किया जाता है.
- justify-items – सीएसएस टेक्स्ट में ग्रिड आइटम को उनके ग्रिड एरिया के अंदर हॉरिज़ॉन्टली आर्डर में प्रीव्यू कर अलाइन करता है।
- align-items – किसी भी सीएसएस टेक्स्ट में ग्रिड आइटम को उनके ग्रिड एरिया के अंदर वर्टीकल आर्डर में प्रीव्यू कर अलाइन करता है।
Grid layout alignment example in CSS.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Css Grid Layout Alignment Properties</title>
<style>
.grid-container {
color:red;
display: grid;
height: 120px;
grid-template-columns: 1fr 1fr;
border: 2px solid #111;
}
.grid-item {
font-size:2em;
display: flex;
justify-content: center; /* it Aligns css text horizontally order */
align-items: center; /* it Aligns css text vertically order*/
border: 2px solid #000;
}
.grid-item {
display: flex;
justify-content: center; /* it Aligns css class text horizontally order*/
align-items: center; /* it Aligns css class text vertically order*/
border: 2px solid #ccc;
}
</style>
</head>
<body>
<div class=”grid-container”>
<div class=”grid-item”>Flex Box Element 1</div>
<div class=”grid-item”>Flex Box Element 2</div>
<div class=”grid-item”>Flex Box Element 3</div>
<div class=”grid-item”>Flex Box Element 4</div>
</div>
</body>
</html>
About Inline CSS Properties.
सीएसएस फ्लेक्सबॉक्स और सीएसएस ग्रिड हॉरिजॉन्टल और वर्टीकल टेक्स्ट एलाइनमेंट दोनों ऑपरेशन के लिए पॉवरफुल प्रॉपर्टीज और फीचर्स प्रोवाइड करता हैं।
आप अपनी वेब डेवलपमेंट जरूरत के अनुसार ब्लॉक एलिमेंट के अंदर टेक्स्ट के सिंपल हॉरिजॉन्टल टेक्स्ट-एलाइन का उपयोग कर सकते है।
सीएसएस में वर्टिकल-एलाइन इनलाइन या इनलाइन-ब्लॉक एलिमेंट के लिए बेहतर है। वर्त्तमान में मॉडर्न वेब पेज/वेबसाइट लेआउट बनाने के लिए, फ्लेक्सबॉक्स और ग्रिड सीएसएस प्रॉपर्टीज को अक्सर अधिक काम्प्लेक्स एलाइनमेंट आवश्यकताओं के लिए उपयोग कर सकते है।
