CSS Text Alignment and Text Direction
In this chapter you will learn about these properties: text-align, text-align-last, vertical-align, direction, and unicode-bidi.
Text Alignment
The text-align property sets the horizontal alignment of text. It can take these values:
left— aligns the text to the left.right— aligns the text to the right.center— centers the text.justify— stretches each line so every line has equal width.
For left-to-right text, left is the default; for right-to-left text, right is the default.
Left, right, and center
The headings are centered, left-aligned, and right-aligned.
Prompt
An HTML page showing left, right, and center text alignment.
In an internal
<style> block, center the <h1>, left-align the <h2>, and right-align the <h3> using text-align. Add a heading of each level.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
h1 {
text-align: center;
}
h2 {
text-align: left;
}
h3 {
text-align: right;
}
</style>
</head>
<body>
<h1>Centered heading</h1>
<h2>Left-aligned heading</h2>
<h3>Right-aligned heading</h3>
</body>
</html>
Justify
With justify, each line is stretched so the left and right edges line up, like in a newspaper.
Prompt
An HTML page showing justified text.
In an internal
<style> block, set a <div> to text-align: justify so each line is stretched to equal width, like in a newspaper. Put a long multi-sentence paragraph of text inside the div.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
div {
text-align: justify;
}
</style>
</head>
<body>
<div>
When the text-align property is set to justify, each line is stretched so that every line has equal width, and the left and right margins are straight. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</div>
</body>
</html>
Text Align Last
The text-align-last property sets how the last line of a text is aligned. It can take these values: auto (the default), left, right, center, justify, start, and end.
Example
The last line of three paragraphs is aligned right, center, and justified.
Prompt
An HTML page showing the text-align-last property.
In an internal
<style> block, make three paragraph classes: text-align-last right, center, and justify. Give each paragraph enough text to wrap over several lines so the alignment of the last line is visible.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
p.a {
text-align-last: right;
}
p.b {
text-align-last: center;
}
p.c {
text-align-last: justify;
}
</style>
</head>
<body>
<p class="a">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. The last line is aligned right.</p>
<p class="b">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. The last line is centered.</p>
<p class="c">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. The last line is justified.</p>
</body>
</html>
Vertical Alignment
The vertical-align property sets the vertical alignment of an element. It can take these values: baseline (the default), a length or percent, sub, super, top, text-top, middle, bottom, and text-bottom.
Example
An image in a line of text is shown with several vertical-align values.
Prompt
An HTML page showing the vertical-align property on images within a line of text.
In an internal
<style> block, make five image classes with vertical-align: baseline, text-top, text-bottom, sub, and super. Use small inline images (a data URI SVG square) placed inside a line of text so the vertical alignment differences show.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
img {
width: 24px;
height: 24px;
}
img.a {
vertical-align: baseline;
}
img.b {
vertical-align: text-top;
}
img.c {
vertical-align: text-bottom;
}
img.d {
vertical-align: sub;
}
img.e {
vertical-align: super;
}
</style>
</head>
<body>
<p>An image with a baseline alignment: <img class="a" src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24'><rect width='24' height='24' fill='%234CAF50'/></svg>"></p>
<p>An image with a text-top alignment: <img class="b" src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24'><rect width='24' height='24' fill='%234CAF50'/></svg>"></p>
<p>An image with a text-bottom alignment: <img class="c" src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24'><rect width='24' height='24' fill='%234CAF50'/></svg>"></p>
<p>An image with a sub alignment: <img class="d" src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24'><rect width='24' height='24' fill='%234CAF50'/></svg>"></p>
<p>An image with a super alignment: <img class="e" src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24'><rect width='24' height='24' fill='%234CAF50'/></svg>"></p>
</body>
</html>
Text Direction
The direction property sets the writing direction inside a block-level element.
Tip: Use it together with the unicode-bidi property to support text in multiple languages in the same document.
Example
The paragraph is set to run right to left.
Prompt
An HTML page showing right-to-left text direction.
In an internal
<style> block, set a <p> to direction: rtl and unicode-bidi: bidi-override so the text runs right to left. Add a paragraph of text.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
p {
direction: rtl;
unicode-bidi: bidi-override;
}
</style>
</head>
<body>
<p>This paragraph runs from right to left.</p>
</body>
</html>
The CSS Text Alignment/Direction Properties
A summary of the properties:
direction— sets the writing direction.text-align— sets the horizontal alignment of text.text-align-last— sets how the last line of a text is aligned.unicode-bidi— used withdirectionto support multiple languages in the same document.vertical-align— sets the vertical alignment of an element.