Text alignment in HTML




Horizontal alignment of text

Horizontal alignment of text is controlled using STYLE="text-align: ", which is a style that can be used on all types of text section, including the BODY tag on the page. Relative to the right and left margin, you have the following options for alignment:

ValueEffect
leftAlignment to the left margin.
rightAlignment to the right margin.
justifyAlignment to both margins.
centerCentrered text


This is a few lines from Kenneth Grahame's The Wind in the Willows in a DIV tag for demonstration:

Using STYLE="text-align:left"
'Hullo, Mole!' said the Water Rat.
'Hullo, Rat!' said the Mole.
'Would you like to come over?' enquired the Rat presently.
'Oh, its all very well to TALK,' said the Mole, rather pettishly, he being new to a river and riverside life and its ways.
The Rat said nothing, but stooped and unfastened a rope and hauled on it; then lightly stepped into a little boat which the Mole had not observed. It was painted blue outside and white within, and was just the size for two animals; and the Mole's whole heart went out to it at once, even though he did not yet fully understand its uses.


Using STYLE="text-align:right"
'Hullo, Mole!' said the Water Rat.
'Hullo, Rat!' said the Mole.
'Would you like to come over?' enquired the Rat presently.
'Oh, its all very well to TALK,' said the Mole, rather pettishly, he being new to a river and riverside life and its ways.
The Rat said nothing, but stooped and unfastened a rope and hauled on it; then lightly stepped into a little boat which the Mole had not observed. It was painted blue outside and white within, and was just the size for two animals; and the Mole's whole heart went out to it at once, even though he did not yet fully understand its uses.


Using STYLE="text-align:justify"
'Hullo, Mole!' said the Water Rat.
'Hullo, Rat!' said the Mole.
'Would you like to come over?' enquired the Rat presently.
'Oh, its all very well to TALK,' said the Mole, rather pettishly, he being new to a river and riverside life and its ways.
The Rat said nothing, but stooped and unfastened a rope and hauled on it; then lightly stepped into a little boat which the Mole had not observed. It was painted blue outside and white within, and was just the size for two animals; and the Mole's whole heart went out to it at once, even though he did not yet fully understand its uses.


Using STYLE="text-align:center"
'Hullo, Mole!' said the Water Rat.
'Hullo, Rat!' said the Mole.
'Would you like to come over?' enquired the Rat presently.
'Oh, its all very well to TALK,' said the Mole, rather pettishly, he being new to a river and riverside life and its ways.
The Rat said nothing, but stooped and unfastened a rope and hauled on it; then lightly stepped into a little boat which the Mole had not observed. It was painted blue outside and white within, and was just the size for two animals; and the Mole's whole heart went out to it at once, even though he did not yet fully understand its uses.






Vertical alignment of text

Vertical alignment of text is controlled using STYLE="vertical-align: ", which is a style that can be used on all types of text section, including the BODY tag on the page. The vertical alignment is normally only used in text fields standing side by side, where the texts have different lengths, e.g. in tables. In regards to text, you have the following options:

ValueEffect
topThe text is placed at the top of the text field.
middleThe text is placed in the middle of the text field.
bottomThe text is placed at the bottom of the text field.


This is a table where the cell, the TD tag, is vertically aligned using STYLE="vertical-align: ", for demonstration:

Using STYLE="vertical-align:top" Using STYLE="vertical-align:middle" Using STYLE="vertical-align:bottom"