CSS में alignment का मतलब है कि किसी HTML element के अंदर content किस तरह show होगा। alignment के लिए text-align , text-align-last , vertical-align properties का use किया जाता है। इस topic में आज हम इसी बारे में बात करेंगे।

CSS text-align

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

CSS text-align example

CopyFullscreenClose FullscreenRun
<!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>

CSS text-align-last

text-align-last property का use किसी HTML element के अंदर text की last line को align करने के लिए किया जाता है। की तरह ही इसमें right , justify & center values set कर सकते हैं।

CSS text-align example

CopyFullscreenClose FullscreenRun
<!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>

CSS vertical-align

इसका use element की vertical alignment set करता है। इसकी values कुछ इस प्रकार है।

  1. baseline
  2. sub
  3. super
  4. top
  5. middle
  6. bottom
  7. text-bottom
  8. initial
  9. text-top

Text with initial alignment

Text with sub alignment

Text with super alignment

Text with middle alignment

CSS vertical-align example

CopyFullscreenClose FullscreenRun
<!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 के बारे में अच्छे से समझ आया होगा।

Related Topics :

Rahul Kumar

Rahul Kumar

Hi ! I'm Rahul Kumar Rajput founder of learnhindituts.com. I'm a software developer having more than 4 years of experience. I love to talk about programming as well as writing technical tutorials and blogs that can help to others. I'm here to help you navigate the coding cosmos and turn your ideas into reality, keep coding, keep learning :)

Get connected with me. :) LinkedIn Twitter Instagram Facebook

b2eprogrammers