CSS में alignment का अर्थ यह होता है किसी HTML element या कोई भी content display में किस प्रकार से show हो रहा होगा ये decide करने का काम text-align , text-align-last , vertical-align properties का होता है इसके use से आप किसी भी element align कर सकते है।
CSS text-align
किसी भी text को align करने के text-align property का use किया जाता है। जिसके साथ कुछ values का use किया जाता है जो इस प्रकार है :
text-align:center: जब किसी text को display के center में show करना हो तो इसका use करते है।text-align:right:जब किसी text को display के right side में show करना हो तो इसका use करते है।text-align:left:जब किसी text को display के left side में show करना हो तो इसका use करते है।text-align:justify:जब किसी text के हर line को same width and height देने के लिए इसका use करते है।
<!DOCTYPE html>
<html>
<head>
<style>
.center {
text-align: center;
border: 3px solid green;
}
.right {
text-align: right;
border: 3px solid green;
}
.left {
text-align: left;
border: 3px solid green;
}
</style>
</head>
<body>
<div class="center">
<p>This text is centered.</p>
</div>
<div class="right">
<p>This text is right side.</p>
</div>
<div class="left">
<p>This text is left side .</p>
</div>
</body>
</html>This text is centered.
This text is right side.
This text is left side .
CSS text-align-last
इस property का use किसी भी sentence के last line को align करने के लिए किया जाता है।
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
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam,
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,
<!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
इस property का use किसी element का vertical align set करने के लिए किया जाता है। इसके साथ कुछ values का use किया जाता है।
- baseline
- sub
- super
- top
- middle
- bottom
- text-bottom
- initial
- text-top
<!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><br><br>
<p>Text with <b style="vertical-align : sub">sub</b> alignment</p><br><br>
<p>Text with <b style="vertical-align : super">super</b> alignment</p><br><br>
<p>Text with <b style="vertical-align : top">top</b> alignment</p><br><br>
<p>Text with <b style="vertical-align : text-top">text-top</b> alignment</p><br><br>
<p>Text with <b style="vertical-align : middle">middle</b> alignment</p><br><br>
<p>Text with <b style="vertical-align : bottom">bottom</b> alignment</p><br><br>
<p>Text with <b style="vertical-align : text-bottom">text-bottom</b> alignment</p><br><br>
</body>
</html>Text with initial alignment
Text with sub alignment
Text with super alignment
Text with top alignment
Text with text-top alignment
Text with middle alignment
Text with bottom alignment
Text with text-bottom alignment