CSS Tutorial Lesson 18: Text Positioning

TwitterShare/Bookmark

[Lesson 17]<<[Contents]>>[Lesson 19]

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 

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

Six months Circle

 Circle

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.

 [Lesson 17]<<[Contents]>>[Lesson 19]