Text Alignment

The text-align property is used to set the horizontal alignment of a text. Text can be centered, or aligned to the left or right, or justified. When text-align is set to "justify", each line is stretched so that every line has equal width, and the left and right margins are straight (like in magazines and newspapers).

HTML file:	Displayed by browser:
<style> h1 { text-align: center; } p.date { text-align: right; } p.main { text-align: justify; } </style> <body> <h1>CENTERED TEXT Example</h1> <p class="date">RIGHT-ALIGNED:September 17, 2015.</p> <p class="main"> THIS IS JUSTIFIED TEXT -- In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since. <cite>Whenever you feel like criticizing anyone,</cite> he told me, <cite>just remember that all the people in this world haven't had the advantages that you've had.</cite> </p> <p> DEFAULT: LEFT-ALIGNED TEXT -- This paragraph is aligned left. It doesn't need any declaration to make it so. Try resizing the browser window to see how the value "justify" works and compare it to this left-aligned paragraph. You will see a big difference, especially as you keep your eye on the right margin. </p> </body>	CENTERED TEXT Example RIGHT-ALIGNED:September 17, 2015. THIS IS JUSTIFIED TEXT -- In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since. Whenever you feel like criticizing anyone, he told me, just remember that all the people in this world haven't had the advantages that you've had. DEFAULT: LEFT-ALIGNED TEXT -- This default paragraph is aligned left. It doesn't need any declaration to make it so. Try resizing the browser window to see how the value "justify" works and compare it to this left-aligned paragraph. You will see a big difference, especially as you keep your eye on the right margin.

HTML file:

Displayed by browser:

<body>
<h1>CENTERED TEXT Example</h1>
<p class="date">RIGHT-ALIGNED:September 17, 2015.</p>
<p class="main">
THIS IS JUSTIFIED TEXT -- In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since. <cite>Whenever you feel like criticizing anyone,</cite> he told me, <cite>just remember that all the people in this world haven't had the advantages that you've had.</cite>
</p>
<p>
DEFAULT: LEFT-ALIGNED TEXT -- This paragraph is aligned left. It doesn't need any declaration to make it so. Try resizing the browser window to see how the value "justify" works and compare it to this left-aligned paragraph. You will see a big difference, especially as you keep your eye on the right margin.
</p>
</body>

CENTERED TEXT Example

RIGHT-ALIGNED:September 17, 2015.

THIS IS JUSTIFIED TEXT -- In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since. Whenever you feel like criticizing anyone, he told me, just remember that all the people in this world haven't had the advantages that you've had.

DEFAULT: LEFT-ALIGNED TEXT -- This default paragraph is aligned left. It doesn't need any declaration to make it so. Try resizing the browser window to see how the value "justify" works and compare it to this left-aligned paragraph. You will see a big difference, especially as you keep your eye on the right margin.