CSS text align horizontal

By default, the text on the web pages is aligned to the left edge of the element in which it is located, but using the text-align property, you can redefine how lines of text align with the element's borders. Let's consider each of the possible values:

left aligns text to the left edge of the element.
right aligns text to the right of the element.
center aligns text to the center of the element.
justify aligns text to the width, in such text both ends of the line are placed close to the inner edges of the element. The spaces between the words in this case are adjusted by the browser so that the length of all strings was strictly identical.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Page title</title>
    <style>
      h1 { text-align:center; }
      p.date { text-align:right; }
      p.main { text-align:justify; } /*value justify stretching text in width*/
      p { text-indent:30px; } /*set the indent size for the first line of the paragraph*/
    </style>
  </head>

  <body>
    <h1>Example of text alignment</h1>
    <p class="date">february, 2018</p>
    <p class="main">In addition to aligning the text, the first line of the
	paragraph was set to a small indent. This effect is very useful on pages with
	large amounts of text, making visual perception easier.</p>
  </body>
</html>

Try it »

Note: the text-align property works only with block elements, such as a paragraph or div, aligning all inline content inside them, including images. Applying a property to inline elements such as a link or span will have no effect.

With this theme look: