If tutorials available on this website are helpful for you, please whitelist this website in your ad blocker😭 or Donate to help us ❤️ pay for the web hosting to keep the website running.
CSS में alignment का मतलब है कि किसी HTML element के अंदर content किस तरह show होगा। alignment के लिए text-align , text-align-last , vertical-align properties का use किया जाता है। इस topic में आज हम इसी बारे में बात करेंगे।
text-align property का use किसी HTML element के अंदर text को align करने जाता है। जिसकी values कुछ प्रकार है।
text-align : center : इसका use text को center में show करने के लिए किया जाता है।
text-align : right : इसका use text को right side में show करने के लिए किया जाता है।
text-align : left : इसका use text को left side में show करने के लिए किया जाता है।
text-align : justify : इससे text की हर एक line equal width में divide हो जाती है।
Text align left
Text align center
Text align center
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS text-align Example</title>
<style>
div {
border: 1px solid black;
padding: 10px;
width: 200px;
height: 200px;
text-align: justify;
}
</style>
</head>
<body>
<p style="text-align:left">Text align left</p>
<p style="text-align:center">Text align center</p>
<p style="text-align:right">Text align center</p>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus utLorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar.
</div>
</body>
</html>text-align-last property का use किसी HTML element के अंदर text की last line को align करने के लिए किया जाता है। की तरह ही इसमें right , justify & center values set कर सकते हैं।
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS text-align-last Example</title>
</head>
<body>
<div style="text-align-last:center"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus</p></div>
<div style="text-align-last:right"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, </p></div>
<div style="text-align-last:justify"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus tellus diam, consequat gravida libero rhoncus tellus diam, </p></div>
</body>
</html>इसका use element की vertical alignment set करता है। इसकी values कुछ इस प्रकार है।
Text with initial alignment
Text with sub alignment
Text with super alignment
Text with middle alignment
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS text-align-last Example</title>
</head>
<body>
<p>Text with <b style="vertical-align : initial">initial</b> alignment</p>
<p>Text with <b style="vertical-align : sub">sub</b> alignment</p>
<p>Text with <b style="vertical-align : super">super</b> alignment</p>
<p>Text with <b style="vertical-align : top">top</b> alignment</p>
<p>Text with <b style="vertical-align : text-top">text-top</b> alignment</p>
<p>Text with <b style="vertical-align : middle">middle</b> alignment</p>
<p>Text with <b style="vertical-align : bottom">bottom</b> alignment</p>
<p>Text with <b style="vertical-align : text-bottom">text-bottom</b> alignment</p>
</body>
</html>I hope, आपको text alignment के बारे में अच्छे से समझ आया होगा।