Loading lesson path
In this chapter you will learn about the following properties:
Formula
text - align text - align - last vertical - align direction unicode - bidiFormula
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 left right - Aligns the text to the right center - Centers the text justify - Stretches the lines so that each line has equal width The following example shows left, right and center aligned text
Formula
(left is default if text direction is left - to - right, and right is default if text direction is right - to - left):Example h1 {
text-align: center;
}
h2 {
text-align: left;
}
h3 {
text-align: right;
}
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):Example div {
text-align: justify;
}Formula
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 left left - The last line is aligned to the left right - The last line is aligned to the right center
Formula
- The last line is center - aligned justifyFormula
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;
}Formula
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 parent length/% - Raises or lower an element by the specified length or percent sub - The element is aligned with the subscript baseline of the parent super - The element is aligned with the superscript baseline of the parent top
Formula
- The element is aligned with the top of the tallest element on the line text - topFormula
- The element is aligned with the lowest element on the line text - bottomSet the vertical alignment of an image in a text:
img.a {
vertical-align: baseline;
}
img.b {
vertical-align: text-top;
}
img.c {Formula
vertical - align:text-bottom;
}
img.d {
vertical-align: sub;
}
img.e {
vertical-align: super;
}Formula
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.
Example p {
direction: rtl;
unicode-bidi: bidi-override;
}Formula
Specifies how to align the last line of a text unicode - bidiUsed 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