Text Alignment

One of the quickest ways to change the look of a web page is to align the text on it. Alignment determines the position of the edges of the paragraph relative to the vertical sides of the page. There exists a text-align property in CSS to position a paragraph to the left or right, along the center of the page, or by width. This property describes how the content will be aligned on the page. Let's take a look at how to set the alignment using the following values: left, right, center, justify, start, end.

text-align: left / right

text-align: left;

The left value aligns the text to the left of the page, and the right side of the text is left hanging as shown in the picture below:

With this alignment method, the text is easy to read, since it is aligned in the same direction as reading (for LTR - left-to-right languages), and it is also easier to find the beginning of a new line. The value left is used by default, so there's no need to specify it.

text-align: right;

The right value aligns the text to the right border of the parent block, and, as in the example with the left value, one side is left hanging, but in this case, it's the left one.

For some languages, the default value is set to the right (e.g. Arabic, Hebrew).

text-align: center / justify

text-align: center;

The center value is used to align the text to the center of the parent block. Lines with equal indents on the sides are shifted to the middle so we can see a ladder forming on the left and right:

It is used quite often when designing headings or captions:

text-align: justify;

The next one is the justify value, or justification. The text spans the entire width of the parent block’s area, which simultaneously aligns the edges of the lines to the left and right sides of the parent box.

Be careful! When aligning a sentence horizontally, the spaces between words grow, while words are wrapped at the borders of the block. This contributes to an excessive line stretching, which increases spaces in narrow columns! Below we can see a text with huge spaces, which does not look pretty:

This alignment is mainly used when styling text for a book (newspaper or magazine) on sites for online reading, as well as for designing the articles.

text-align: start / end

text-align: start;
text-align: end;

By purpose, start and end are very similar to the left and right values. start has the same effect as left if the reading direction of the text in LTR language is left-to-right and, similarly, as right when the direction of the RTL text is right-to-left. Conversely, end works like right if the text is LTR and like left if the direction of the text is RTL.

These values are needed so that the text has the preferred alignment for the browser's language settings and it is more convenient for the user, say, to read Arabic or Hebrew lined to the right side.

A small example. There are two lines where one is RTL and the other is LTR. If we specify the property text-align: left; on both lines, then both lines will be aligned to the left:

For some users who speak Arabic, such a text will be unusual to read. However, if you set start instead of left, then the offset will be set to the side depending on the direction of the text.

Note

The text-align property does not move the whole element with the text, but only the text itself, so it is not suitable for aligning blocks. It will not be possible to position the <p> element in the center of its parent block using text-align. Let's take a look at a small example. The markup below has a parent <div class="parent"> with one child <p class="child">:

<div class="parent">
  <p class="child">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
    Illo aliquam voluptate ducimus inventore adipisci perferendis assumenda 
    asperiores ea deserunt dolor, harum itaque!
  </p>
</div>

In CSS, we will specify the minimum properties for separating elements visually, outline the parent with a dotted line and the child with a solid line. Let's make the .child element 100px smaller than its parent and apply the text-align: center property.

.parent {
  width: 300px;
  border: 1px dashed black;
}
.child {
  width: 200px;
  text-align: center;
  border: 1px solid black;
}

Note that despite the fact that we’ve specified the center alignment, the text box itself has not moved, while the content inside the box is now centered. We can conclude that the property affects only the text content of elements, but not the elements themselves.

Conclusion

The text-align property is a powerful tool for enhancing the visual appeal of your web page and improving readability. By mastering the use of different alignment options like left, right, center, justify, start, and end, you can control how text flows on your site, making the content more accessible and aesthetically pleasing. Whether you're centering headlines, justifying paragraphs for a polished look, or ensuring text aligns correctly based on language direction, text-align offers versatile solutions for a wide range of design needs.