CSS Text Alignment

In this tutorial, you will learn-

In this article, you will learn-

1 CSS Text Alignment
2 Text Alignment
3 Text Direction
4 Vertical Alignment

CSS Text Alignment

CSS Text Alignment: The CSS text-align property defines how the text of an element is aligned inside its parent block element.

Text Alignment

The text-align property is used to set the horizontal alignment of a text.

A text can be left or right aligned, centered, or justified.

The accompanying example shows center aligned, and left and right aligned text (left alignment is default if text direction is left-to-right, and right alignment is default if text direction is right to-left):

Example

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  text-align: center;
}

h2 {
  text-align: left;
}

h3 {
  text-align: right;
}
</style>
</head>
<body>

<h1>Heading 1 (center)</h1>
<h2>Heading 2 (left)</h2>
<h3>Heading 3 (right)</h3>

<p>The three headings above are aligned center, left and right.</p>

</body>
</html>

At the point when the text-align property is set to “justify”, each line is stretched so that every line has equivalent width, and the left and right margins are straight (like in magazines and newspapers):

Example

div {
  text-align: justify;
}

Text Direction

The direction and unicode-bidi properties can be used to change the text direction of an element:

Example

<!DOCTYPE html>
<html>
<head>
<style>
p.ex1 {
  direction: rtl;
  unicode-bidi: bidi-override;
}
</style>
</head>
<body>

<p>This is the default text direction.</p>

<p class="ex1">This is right-to-left text direction.</p>

</body>
</html>

Vertical Alignment

The vertical-align property sets the vertical alignment of an element.

Example
Set the vertical alignment of an image in a text:

img.a {
  vertical-align: baseline;
}

img.b {
  vertical-align: text-top;
}

img.c {
  vertical-align: text-bottom;
}

img.d {
  vertical-align: sub;
}

img.e {
  vertical-align: super;
}

Thanks for reading! We hope you found this tutorial helpful and we would love to hear your feedback in the Comments section below. And show us what you’ve learned by sharing your projects with us.