CSS Text Alignment

Text Alignment

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

Text can be aligned to the left or right, or centered.

The following example shows centered text and aligned text on both sides (if the text direction is from left to right, it is aligned to the left by default; if the text direction is from right to left, it is aligned to the right by default):

Example

h1 {
  text-align: center;
}
h2 {
  text-align: left;
}
h3 {
  text-align: right;
}

Try It Yourself

when text-align When the 'justify' property is set, each line will be stretched to have an equal width, and the margins are straight on both sides (like in magazines and newspapers):

Example

div {
  text-align: justify;
}

Try It Yourself

Text Direction

direction and unicode-bidi Property can be used to change the text direction of the element:

Example

p {
  direction: rtl;
  unicode-bidi: bidi-override;
}

Try It Yourself

Vertical Alignment

vertical-align Property sets the vertical alignment of the element.

This example demonstrates how to set the vertical alignment of images within text:

Example

img.top {
  vertical-align: top;
}
img.middle {
  vertical-align: middle;
}
img.bottom {
  vertical-align: bottom;
}

Try It Yourself