Text alignment

The text-align property specifies the alignment of text inside a block container.

The text-align property contains following information:

value: left, right, center, justify or inherit;
initial: left if direction is set to ltr or right if set to rtl;
applies to: block containers;
inherited: yes;
percentages: N/A;
media: visual;
computed value: initial or specified value.

The left, right and center values refer to the position of the text lines inside a block with the relation to the width of the block. The justify value will try to make both sides of the text line even in respect to the box borders by trying to contract or expand the contents.

Example

CSS text-align property example:

<html>
<head>
<title>CSS tutorial</title>
<style type="text/css">
.cent {
	text-align:center;
}
.just {
	text-align:justify;
}
.right {
	text-align:right;
	font-size:0.8em;
}
</style>
</head>

<body>

<h4 class="cent">How to keep visitors happy</h4>
<p class="just">The main purpose of having a website is to show others something of our interest, whether it is just a piece of information, a product we sell or a discussion board about a particular topic. All of that though does not matter if those who suppose to follow, our visitors, are not pleased with the experience they had on our site.</p>
<p class="right">Date: <b>10 / 15 / 2012</b></p>

</body>
</html>

›› go to examples ››

Example

CSS text-align property example:

Comments

About

Contact

Get Connected