text Alignment

Text alignment determines the appearance and orientation of paragraph edges and can be performed on the left edge, right edge, center, or justified. Table. 1 shows the alignment options of the text block.

Table. 1. Methods for the alignment of the text
Align Left Align right Center Alignment Alignment 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 common option - left aligned when text is shifted to the left to the edge, and the right to remain uneven. Align the right edge and the center is mainly used in headlines and subheads. It will be appreciated that by using the width in the alignment text may appear large intervals between words, which is not very beautiful.

To set the text alignment is commonly used tag section <P> to align parameter that defines the alignment. Also, the text block is allowed to align with the tag <DIV> with the same parameter align, as shown in the Table. 2.

Table. 2. Aligning the text with the align parameter
HTML code Description
<P> text </ p> Adds a new section, the default left-aligned. Before and after the paragraph is automatically added to the small vertical spacing.
<P align = "center"> text </ p> Center Alignment.
<P align = "left"> text </ p> Left alignment.
<P align = "right"> text </ p> Right alignment.
<P align = "justify"> text </ p> Width adjustment.
<Nobr> text </ nobr> Disable automatic transfer lines, even if the text is wider than the browser window.
Text <wbr> Allow browser to make a line break in a specified location, even if the NOBR tag.
<Div align = "center"> text </ div> Center Alignment.
<Div align = "left"> text </ div> Left alignment.
<Div align = "right"> text </ div> Right alignment.
<Div align = "justify"> text </ div> Width adjustment.

The alignment elements on the left edge is the default, so specify it once again is not necessary. So that the parameter align = "left" can be omitted.

The difference between paragraph (tag <P>) tag and <DIV> that at the beginning and end of the section there is a vertical indentation that does not exist in the case of the tag <DIV>.

Align parameter quite versatile and can be applied not only to the body but also to titles like <H1>. In Example 1, it is shown in this case to establish alignment.

Example 1. Text alignment

valid HTML
<DOCTYPE HTML PUBLIC! "- // W3C // DTD HTML 4.01 Transitional // EN" "http://www.w3.org/TR/html4/loose.dtd">
<Html>
<Head>
<Meta http-equiv = "Content-Type" content = "text / html; charset = windows-1251">
<Title> The alignment of the text </ title>
</ Head>
<Body>
<H1 align = "center"> How to catch a lion? </ H1>
<P align = "right"> <strong> search method </ strong> </ p>
<P> Divide the desert into a number of elementary sections, the size of which coincides with the dimensions of a lion, but it is less than the cell size. Next, define the simple search section, which houses the lion, which automatically leads to his capture. </ P>
<P align = "right"> <strong> dichotomy method </ strong> </ p>
<P> Divide the desert in two. In one part - the lion, the other not. Take the half in which the lion, and again divide it in half. So repeat as long as a lion would not be caught. </ P>
</ Body>
</ Html>

result of the example shown in Fig. 1.

Fig. 1. Text alignment

Fig. 1. Align text to the right and left edge

In this example, the header alignment occurs at the center of the browser window, the selected paragraph to the right, and the main text - to the left.

© Policy Copyright www.htmlbook.ru