How do I control the horizontal alignment of text?
Author: Deron Eriksson
Description: This CSS example shows how to control the horizontal alignment of text using the text-align property.
Tutorial created using: Windows XP


In CSSW, the horizontal alignment of text can be control with the text-align property. The text-align property controls the alignment of text within a block. The most typical values for text-align are: left, right, center, and justify. The "left" value left-aligns the text in the block, the "right" value right-aligns the text, "center" centers the text, and "justify" justifies the text so that every line of the text (except the last line) stretch to align with the left and right sides. This is most clearly seen by example, such as the style-test.html example below.

style-test.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Style Test</title>
<style type="text/css">
div { background-color: aqua; border: 1px solid;}
div.center { text-align: center; }
div.left { text-align: left; }
div.right { text-align: right; }
div.justify { text-align: justify; }
</style>
</head>
<body>
<div>
<div class="center">Here is some centered text</div>
<div class="left">Here is some left-aligned text</div>
<div class="right">Here is some right-aligned text</div>
<div class="justify">Here is some text that has been justified. Here is some text that has been justified.</div>
</div>
</body>
</html>

The display of style-test.html is shown here.

horizontal alignment example

The text-align value of an element can also be set to "inherit", meaning that it inherits the text-align value from its parent element. In addition, text-align can specify a string value that can be used to align text in a table column.