Text Alignment
Text alignment as name suggests used for alignment of text.
CSS text alignment has following properties -
-
text-align
-
text-align-last
-
Direction
We will see them Quickly -
Text-align:
The most common and easiest type of centering is that of lines of text in an element. CSS has the rule text-align: center for this purpose -
Example -
Output -
This does not work for centering entire block elements. text-align controls only alignment of inline content like text in its parent block element.
Text-align-last:
The text-align-last property specifies how to align the last line of a text.
Example -
Output -
Direction:
The direction property is used to change the horizontal text direction of an element.
Syntax:
|
direction: ltr | rtl | initial | inherit;
|
The writing-mode property changes the alignment of text so it can be read from top-to-bottom or from left-to-right, depending on the language
|
Syntax: direction: horizontal-tb | vertical-rl | vertical-lr;
|
Example -
|
div {
direction: ltr; /* Default, text read read from left-to-right */
}
.ex {
direction: rtl; /* text read from right-to-left */
}
.horizontal-tb {
writing-mode: horizontal-tb; /* Default, text read from left-to-right and top-to-bottom. */
}
.vertical-rtl {
writing-mode: vertical-rl; /* text read from right-to-left and top-to-bottom */
}
.vertical-ltr {
writing-mode: vertical-rl; /* text read from left-to-right and top to bottom */
}
|
The above example explains all the values attached to the direction property.
