One of the first features that all developers learned when they got started with word processing was text alignment. This little tool has been vital for professional typographers and hobbyist flyer designers. It’s no surprise that CSS supports text alignment when it comes to web design.

the align text The property, along with one or two others, controls how an element horizontally aligns its text. Beyond the basics, browsers slowly implement more specifications, but full support varies. Find out how to align text and what features popular browsers support today.

The basics of the CSS text-align property

Alignment is one of the most familiar typographical terms. As part of the CSS, align text refers to horizontal alignment.

Horizontal text alignment only applies to block containers. These are full width elements such as paragraphs and divs. Using the align text property on an inline element such as em will have no effect. You can also align list items and table cells:

By default, in a left-to-right language (more on this later), the text aligns to the left:

In CSS it is the same as:

p { text-align: left; }

Or:

p { text-align: start; }

Related: What Are Cascading Style Sheets For And What Is CSS For?

You can use other values ​​for the align text property to change the horizontal alignment. The most common values ​​are known to word processing applications:

text-align: left
text-align: center
text-align: right

Use justification to align left and right edges

Another common value for align text is to justify. Browsers add space to justified text so that each line expands to fill the available space:

When justifying text, the last line can be tricky. Since it can be very short (maybe just a single word), the full-width spacing can be ugly. By default, even justified text will align the last row to the left.

Sometimes you may want a different effect. Browser implementations are catching up with the specification, but two approaches are possible.

the justify everything The value should mean that browsers treat the last line like any other and stretch it across the width. However, at the time of writing, no browser supports this value. You can check caniuse to see if they do when you read this article.

Another CSS property, text-align-last, is more flexible and benefits from better support. You can treat it more or less the same as align text, but this only applies to the last line:

Browser support for this property is better, but not perfect. Again, check caniuse before using it. If a browser does not recognize this property, it will ignore it.

Text alignment and reading direction

You may be working with a language, such as Arabic or Hebrew, that is read from right to left. CSS uses the direction property to specify this, for example:

direction: rtl;

These languages ​​usually right-align text by default.

Instead of having to specify left/right, the preferred method of aligning text is using values start and finish. This specifies whether the text should line up at the start of each line or at the end. In languages ​​from left to right, start is equivalent to left. In a language written from right to left, text begins on the right and ends on the left.

Using start or finish means that, regardless of the direction of the text, the alignment is consistent.

How elements inherit from the text-align property

You should know that the align text the property inherits. For example, if you set it to body element, it will apply to every element on the page. You can, of course, override it on any element.

Using the text-align property to control page layout

You can use the align text CSS property to define how browsers lay out text horizontally. The most common values ​​are left, right, center, and to justify. These are quite simple, although to justify introduces some complexity.

You should use text alignment sparingly. On billboards and posters, center alignment may be appropriate, but it can make longer blocks of text difficult to read. The justification is generally more readable when the lines of text are longer. Justifying short columns of text can create awkward spacing.

the align text The property is one of many CSS properties that provide useful formatting and basic positioning.

Read more

About the Author