CSS Text Align – Centered, Justified, Right Aligned Text Style Example

We use the CSS text-align property to align content inside a block-level element.

Examples of block-level elements are paragraphs (<p>...</p>), divs (<div>...</div>), sections (<section>...</section>), articles (<article>...</article>), and so on.

This alignment affects the horizontal axis only. So the text-align property is different from the vertical-align property which we use to set the vertical alignment of an element.

Table of Contents

Basic Syntax

Here’s the basic syntax for the text-align property:

block-level-element { text-align: value; }

Now we’ll look at the different values it can take to help you position things on the page.

Values of the text-align Property

The text-align property accepts left, center, right, justify, and inherit as values.

We will take a look at these values one by one.

Before I dive into the values and what they look like in the browser, take a look at the below CSS. I set these styles for improved visibility, so you can see things better:

 body { display: flex; align-items: center; justify-content: center; height: 100vh; } div { background-color: #adadad; width: 40rem; height: 4rem; padding: 3rem 0.5rem; }

The left Value

The left value of the text-align property is the default. So, every content inside a block-level element is aligned to the left by default.

 div { text-align: left; }

ss-1-3

If you want the content inside a block-level element to align to the left, you don’t need to assign it a text-align value of left. If you do, you’re just duplicating what’s already the default.

The center Value

With the center value, spaces are created on the left and right, so, everything gets pushed to the center.

If you want to align the content inside a block-level element to the center, the center value is your best bet.

 div { text-align: center; }

ss-2-3

The right Value

Assigning a value of right to the text-align property pushes the content inside a block-level element to the right.

 div { text-align: right; }

ss-3-4

The justify Value

The justify value of the text-align property lines up the content on the left and right edges of the block-level element (the box). If the last line isn’t a full line, then it leaves it alone. It’s easier to see how this works in the image below:

 div { text-align: justify; }

ss-4-4

The inherit Value

The inherit value of the text-align property behaves as the name implies. An element with its text-align value set to inherit inherits the text-align value of its direct parent.

 div { text-align: inherit; }

ss-5-5

In this case, our div inherits the text-align value of the body – which is left by default.

If the text-align value of the body is set to right, and that of the div is left to inherit, the text inside the div aligns to the right.

 body { text-align: right; } div { text-align: inherit; }

ss-6-1

Conclusion

In this article, you learned about the CSS text-align property and its values.

The examples we looked at here to see how the values behave contained text only – so you might be wondering if the values work on images too. Well, yes they do.

Below is an image inside a div with text-align set to center:

 <div> <img src="coming-soon.jpg" alt="coming_soon" width="74px" height="54px" />
</div>
 div { text-align: center; }

ss-7-2

Thank you for reading.

Posted by Contributor