CSS Text Alignment

CSS text alignment refers to the way text is positioned within its containing element. In CSS (Cascading Style Sheets), you can use various properties to control the alignment of text. The primary properties for text alignment are:

Text-align

This property sets the horizontal alignment of text content within its container.
Possible values include:

left: Aligns the text to the left.
right: Aligns the text to the right.
center: Centers the text.
justify: Justifies the text, meaning that it stretches the spaces between words to align both the left and right edges.

Example

h1 {
  text-align:  center;
}

h2 {
  text-align:  left;
}

h3 {
  text-align:  right;
}

You can click on above box to edit the code and run again.

Output

Heading 1 (center)

Heading 2 (left)

Heading 3 (right)

The three headings above are aligned center, left and right.

Vertical-align

This property sets the vertical alignment of an inline or table-cell element.
Possible values include:

baseline: Aligns the baseline of the element with the baseline of its parent.
top: Aligns the top of the element with the top of the tallest element or cell.
middle: Aligns the middle of the element with the middle of its parent.
bottom: Aligns the bottom of the element with the bottom of the tallest element or cell.

Example

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;
}

You can click on above box to edit the code and run again.

Output

vertical-align: baseline (default):

An image with a default alignment.

vertical-align: text-top:

An image with a text-top alignment.

vertical-align: text-bottom:

An image with a text-bottom alignment.

vertical-align: sub:

An image with a sub alignment.

vertical-align: sup:

An image with a super alignment.