Home » Wiki Tutorials » Graphic & Design , CSS , Web Design »

How to Display right align text using CSS

text size: T | T Related software / service: CSS

Problem

When you're designing web pages using CSS, you may want to align the text right to make the layout attractive. How can you display right align text using CSS? Please see the solution.

Solution

In order to align text right, we need to use the text-align property. Text-align contains four values.

left: flush left.

right: flush right.

center: be placed in the middle.

justify: each line is stretched so that every line has equal width.

Create an html file with the following codes:
<html>
<head>
</head>
<body>
<p class='s1'>This is the normal text.</p>
<p class='s2'>This is the text aligns right.</p>
</body>
</html>

The effect will be like as below.

text aligns right
In order to align the text right, add the following CSS codes.
<style>
p.s2{text-align:right;}
</style>

Here is the effect.

text aligns right