CSS text-align property to align the text of an HTML tag

Last updated : 2023-09-28

The text-align property in CSS is used to horizontally align the content of an HTML element. This property only works when applied to block-level elements. If you need to align the text of an inline element such as <strong> or <span>, you should first convert it into a block-level element using the display: block; property.

text-align: center; Property

The CSS rule text-align: center;, as the name suggests, allows you to horizontally center the text within the element.

In the following example, we use the text-align: center; property to center a title within <h1> and <h2> tags.

css

/* text-align:center; in h tags for titles */

h1 {
  text-align: center;
}

h2 {
  text-align: center;
}

css

p {
  text-align: center;
}
div {
  text-align: center;
}

Centering headings is a very common task, so this CSS property will be very useful to you on various occasions.

Aligning text to the right with text-align: right;

With text-align: right;, we will place the text to the right of the screen. Take a look at the following example of how to use the text-align: right; property.

css

h1 {
  text-align: right;
}

h2 {
  text-align: right;
}

p {
  text-align: right;
}

Text on the left side of the screen with text-align: left;

This is the default value of the text-align property. In any case, if for some reason you need to align your text to the left in relation to something else, you can do so with the following code.

css

h1 {
  text-align: left;
}

h2 {
  text-align: left;
}

p {
  text-align: left;
}

text-align: justify;

Many times you'll need to justify the text on your web page. For example, if you're developing for a newspaper, it's common to justify the text as it imparts a formal character to the writing. To achieve this, you can use the text-align: justify; property.

html

<p>
The text-align: justify property allows you to justify the text on your pages to give a more formal  appearance to your content.
</p>

css

p {
  text-align: justify;
}

Juneiker Castillo freelance web developer

I am Juneiker Castillo, a passionate front-end web developer deeply in love with programming and creating fast, scalable, and modern websites—a JavaScript enthusiast and a React.js lover ⚛️.

About me