CSS Text Alignment
Text Alignment and Text Direction
In this chapter you will learn about the following properties:
Text Alignment
The text-align property is used to set the horizontal alignment of a text.
This property can have one of the following values:
left- Aligns the text to the leftright- Aligns the text to the rightcenter- Centers the textjustify- Stretches the lines so that each line has equal width
The following example shows left, right and center aligned text (left is default if text direction is left-to-right, and right is default if text direction is right-to-left):
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 (like in magazines and newspapers):
Text Align Last
The text-align-last property specifies how to align the last line of a text.
This property can have one of the following values:
auto- Default value. The last line is justified and aligned leftleft- The last line is aligned to the leftright- The last line is aligned to the rightcenter- The last line is center-alignedtjustify- The last line is justified as the rest of the linesstart- The last line is aligned at the start of the lineend- The last line is aligned at the end of the line
Example
Different alignment of the last line in three <p> elements:
p.a
{
text-align-last: right;
}
p.b
{
text-align-last: center;
}
p.c
{
text-align-last: justify;
}
Try it Yourself »
Vertical Alignment
The vertical-align property sets the vertical alignment of an element.
This property can have one of the following values:
baseline- Default value. The element is aligned with the baseline of the parentlength/%- Raises or lower an element by the specified length or percentsub- The element is aligned with the subscript baseline of the parentsuper- The element is aligned with the superscript baseline of the parenttop- The element is aligned with the top of the tallest element on the linetext-top- The element is aligned with the top of the parent element's fontmiddle- The element is placed in the middle of the parent elementbottom- The element is aligned with the lowest element on the linetext-bottom- The element is aligned with the bottom of the parent element's font
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;
}
Try it Yourself »
Text Direction
The direction
property specifies the text direction/writing direction
within a block-level element.
Tip: Use this property together with the
unicode-bidi property to
set or return whether the text should be overridden to support multiple
languages in the same document.
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 |
