Text alignment in HTML

Text alignment in HTML
 
Text alignment in HTML
  • Currently 0 out of 5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5
Rating: 0/5 (0 votes cast)

Thank you for rating!

You have already rated this page, you can only rate it once!

Your rating has been changed, thanks for rating!

Log in or create a user account to rate this page.


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
automatically adds small vertical indentations.

<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.


 

Read also

Formatting text in HTML

Formatting text in HTML

Font size in HTML

Font size in HTML

Aligning images in HTML

Aligning images in HTML

Table alignment in HTML

Table alignment in HTML

Post comment

basicuse.net
html5_css
106160485398655174790

Quick navigation

General navigation