Text alignment in HTML
Text alignment determines the appearance and orientation of the edges of the paragraph. The alignment can be to the left, right, center, or justified. Table 1 shows different alignments of the text.
Table 1. Different ways to align text.
| Left alignment | Right alignment | Centered | Justified |
|---|---|---|---|
| Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. | Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. | Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. | Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. |
The most popular is the left alignment when the text is shifted to the left edge and the right remains uneven. Right and centered alignments are mainly used in headings and subheadings. It should be noted that when using justification there may appear long intervals between words, which is not very nice.
To set text alignment, p paragraph tag is commonly used with the parameter align, which determines the alignment. Also you can align with the tag div with the same parameter align, as shown in table 2.
Table 2. Aligning the text with the parameter align.
| HTML code | Description |
|---|---|
<p>Text</p> |
Adds a new paragraph, by default aligned left. Before and after a paragraph |
<p align="center">Text</p> | Centered. |
<p align="left">Text</p> | Left alignment. |
<p align="right">Text</p> | Right alignment. |
<p align="justify">Text</p> | Justified. |
<nobr>Text</nobr> | Disables automatic line break, even if the text is wider than the browser window. |
Text<wbr> | Allows the browser to break lines at the selected location, even if the nobr tag is used. |
<div align="center">Text</div> | Centered. |
<div align="left">Text</div> | Left alignment. |
<div align="right">Text</div> | Right alignment. |
<div align="justify">Text</div> | Justified. |
Left alignment goes by default, so there is no need to select this parameter again. So the parameter align="left" can be omitted.
The difference between the paragraph (tag p) and tag div is that at the beginning and the end of the paragraph a vertical spacing appears, which is not the case with the tag div.
The parameter align is quite versatile and can be applied not only to the body, but also to the headers, like h1. Example 1 shows how to set the alignment in such cases.
Example 1. Text alignment.
<h1 align="center">How to catch a lion?</h1> <p align="right"><strong>Method of searching</strong></p> <p>Let's divide the desert on a number of sections. The size of the section matches the dimensions of the lion, but is smaller than the cell. Next, by simple search method find the area in which the lion is present, which automatically leads to his capture.</p> <p align="right"><strong>The method of dichotomy</strong></p> <p>Let's divide the desert in two halves. On one side - the lion is present, the other one is not. Chose the half in which the lion is present, and again divide the section in half. This is repeated for as long as the lion is not caught.</p>
In this example, the alignment of the header is centered, the selected paragraph is aligned to the right, and the main text - to the left.
