Text Alignment
Text Alignment and Text Direction
In this chapter you will learn about the following properties:
- text-align
- text-align-last
- direction
- unicode-bidi
- vertical-align
Text Alignment
The horizontal alignment of a text can be adjusted using the text-align attribute.
A text can be justified, centered, or aligned to the left or right.
This example displays text that is center aligned as well as left and right aligned (text direction left-to-right defaults to left alignment, text direction right-to-left to default to right alignment):
Example
h1 {
text-align: center;
}
h2 {
text-align: left;
}
h3 {
text-align: right;
}
The left and right margins are straight (like in magazines and newspapers) and every line is stretched to equal width when the text-align attribute is set to “justify”:
Example
div {
text-align: justify;
}
Text Align Last
The alignment of a text’s final line is specified by the text-align-last attribute.
Example
Align the last line of text in three <p> elements:
p.a {
text-align-last: right;
}
p.b {
text-align-last: center;
}
p.c {
text-align-last: justify;
}
Text Direction
An element’s text direction can be altered using the direction and unicode-bidi properties:
Example
p {
direction: rtl;
unicode-bidi: bidi-override;
}
Vertical Alignment
An element’s vertical alignment can be adjusted using the vertical-align attribute.
Example
Set the vertical alignment of an image in a text:
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;
}
The CSS Text Alignment/Direction Properties
| Property | Description |
|---|---|
| direction | Specifies the text direction/writing direction |
| text-align | Specifies the horizontal alignment of text |
| text-align-last | Specifies how to align the last line of a text |
| unicode-bidi | Used together with the direction property to set or return whether the text should be overridden to support multiple languages in the same document |
| vertical-align | Sets the vertical alignment of an element |
