Lesson 18: Text Positioning

❮ Previous Lesson Next Lesson ❯

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 CSS structures are illustrated as follows:

h1{ text-align:left;}
h2{text-align:right;}
p{text-align: center;}
div{text-align: justify;}

Example 18.1

<!Doctype html>

<html>
<head>
</head>
<body>
<h1 style="text-align: left;">
The text is aligned  left</h1>
<h2 style="text-align: right;"> The text is aligned right</h2>
<h3 style="text-align: right;"> The text is  aligned at  centre</h3>
<p style="text-align: justify;">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.</p>
</body>
</html>

The Output

The text is aligned left

The text is aligned right

The text is aligned at centre

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 alongside an image. There are a couple of values associated with the vertical-align property, namely text-top, middle, text-bottom, top, baseline and more.

Example 18.2

<!DOCTYPE html>
<html>
<head>
<title>Vertical Alignment</title>
<style type="text/css">

.onTop {vertical-align: text-top;}
.AtMiddle {vertical-align: middle;}
.AtBottom{vertical-align: text-bottom;}

</style>
</head>
<body>
<h1>Vertical Alignment in CSS</h1>
<p><img src="http://htmltutor.org/wp/wp-content/uploads/2015/01/hue2.jpg" class="onTop"> Circle</p>
<p><img src="http://htmltutor.org/wp/wp-content/uploads/2015/01/hue2.jpg" class="AtMiddle" /> Circle</p>
<p><img src="http://htmltutor.org/wp/wp-content/uploads/2015/01/hue2.jpg" class="AtBottom" /> Circle</p>
</body>

</html>

The Output

Circle

*If you can't see the effect of the alignments, please click on Example 18.2

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

<p style="text-indent: 20px">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.

<p style="text-indent: -20px">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.</p>

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.

❮ Previous Lesson Next Lesson ❯