totn CSS

CSS: text-align property

This CSS tutorial explains how to use the CSS property called text-align with syntax and examples.

Description

The CSS text-align property defines how the the text of an element is aligned within its parent block element.

Syntax

The syntax for the text-align CSS property is:

text-align: value;

Parameters or Arguments

value

The alignment of the text. It can be one of the following:

Value Description
left Text is left aligned
div { text-align: left; }
right Text is right aligned
div { text-align: right; }
center Text is centered
div { text-align: center; }
justify Text is justified (ie: line up the left and right edges of the paragraph)
div { text-align: justify; }
start If direction is left-to-right, the text will be left aligned.
If direction is right-to-left, the text will be right aligned.
div { text-align: start; }
end If direction is left-to-right, the text will be right aligned.
If direction is right-to-left, the text will be left aligned.
div { text-align: end; }
inherit Element will inherit the text-align from its parent element
div { text-align: inherit; }

Note

  • The text-align property only aligns the inline content (ie: text) of an element within its parent block element.
  • The text-align property does not align a block element itself, only the inline content.

Browser Compatibility

The CSS text-align property has basic support with the following browsers:

  • Chrome
  • Android
  • Firefox (Gecko)
  • Firefox Mobile (Gecko)
  • Internet Explorer (IE)
  • IE Phone
  • Opera
  • Opera Mobile
  • Safari (WebKit)
  • Safari Mobile

Example

We will discuss the text-align property below, exploring examples of how to use this property in CSS.

Using Center

Let's look at a CSS text-align example where we center the text.

div { text-align: center; }

In this CSS text-align example, we have centered the text in the <div> tag.

Using Left Align

Next, let's look at a CSS text-align example where we left-align the text.

div { text-align: left; }

In this CSS text-align example, we have left-aligned the text in the <div> tag.

Using Right Align

Let's look at a CSS text-align example where we right-align the text.

div { text-align: right; }

In this CSS text-align example, we have right-aligned the text in the <div> tag.