CSS Tutorial Lesson 18: Text Positioning

In CSS, we can manipulate text positioning by changing its alignment and indentation. There are three kinds of text positioning, horizontal alignment, vertical alignment and indentation.

18.1 Horizontal Alignment

We use the text-align property to align text horizontally. There are four types of horizontal alignments, left, right, centre and justify. The syntaxes are illustrated as follows:

H1{ text-align:left;}

H2{text-align:right;}

p{text-align: center;}

div{text-align: justify;}

Example 18.1 

The text is aligned  left

 The text is aligned right

 The text is  aligned center

In CSS, we can manipulate text positioning by changing its alignment and indentation. In addition, We can also control spacing between letters, spacing between words and spacing between lines of text.

The Output

The text is aligned left

The text is aligned right

The text is aligned center

In CSS, we can manipulate text positioning by changing its alignment and indentation. In addition, We can also control spacing between letters, spacing between words and spacing between lines of text.

18.2 Vertical Alignment

In CSS , the vertical-align property it is commonly used to align text vertically in cells of table and text along side an image. There are a couple of  values associated with vertical-align property, namely text-top, middle, text-bottom, top, baseline and more.

Example 18.2

Vertical Alignment in CSS

Circle

Circle

Circle

The Output

 Circle
 Circle
Circle

18.3 Text Indentation
Text indentation means how far back the first line of a paragraph is pushed to the right or left. The property is text-indent and its value is in pixel or ems. The value can be positive or negative. If the value is positive, the text is pushed to the right whereas if the value is negative the text is pushed to the left.

Example 18.3

Text indentation means how far back the first line of a paragraph is pushed to the right or left. The property is text-indent and its value is in pixel or ems.

The value can be positive or negative. If the value is positive, the text is pushed to the right whereas if the value is negative the text is pushed to the left.

The Output

Text indentation means how far back the first line of a paragraph is pushed to the right or left. The property is text-indent and its value is in pixel or ems.

The value can be positive or negative. If the value is positive, the text is pushed to the right whereas if the value is negative the text is pushed to the left.