CSS Text Alignment and Text Direction.
➔ The following properties are about CSS text alignment and text direction.
text-aligntext-align-lastdirectionunicode-bidivertical-align
CSS Text Alignment.
➔ The CSS text-align property is used to set the horizontal alignment of a text.
➔ Text alignment can be done in four ways.
leftrightcenterjustify
➔ When the text-align property is set to "justify", each line is stretched so that each line has the same width.
Syntax
text-align: left | right | center | justify | initial | inherit;
Property values
| Value | Description |
|---|---|
| left | Aligns text to the left. |
| right | Aligns text to the right. |
| center | Sets the text to the center. |
| justify | Stretches the lines to equalize the width of each line. |
| initial | Sets the property to its default value. |
| inherit | The element inherits the property value from its parent element. |
Example
#p1 {
text-align: center;
}
#p2 {
text-align: left;
}
#p3 {
text-align: right;
}
#p4 {
text-align: justify;
}Click on the "Try it Now" button to see how it works.
CSS Text Align Last.
➔ The text-align-last property specifies how to align the last line of text.
Syntax
text-align-last: auto | left | right | center | justify | start | end | initial | inherit;
Property values
| Value | Description |
|---|---|
| auto | The last line is justified and aligned left. This is default. |
| left | The last line aligns to the left. |
| right | The last line aligns to the right. |
| center | Sets the last line to the center. |
| justify | Stretches the lines to equalize the width of other lines. |
| start | The last line is aligned at the beginning of the line. |
| end | The last line is aligned at the end of the line. |
| initial | Sets the property to its default value. |
| inherit | The element inherits the property value from its parent element. |
Example
#p1 {
text-align-last: right;
}
#p2 {
text-align-last: center;
}
#p3 {
text-align-last: justify;
}
Click on the "Try it Now" button to see how it works.
CSS Text Direction
➔ The direction and unicode-bidi attributes can be used to change the direction of an element's text.
Syntax
direction: ltr | rtl | initial | inherit;
Property values
| Value | Description |
|---|---|
| ltr | The text direction goes from left to right. This is default. |
| rtl | The text direction goes from right to left. |
| initial | Sets the property to its default value. |
| inherit | The element inherits the property value from its parent element. |
Click on the "Try it Now" button to see how it works.
Syntax
unicode-bidi: normal | embed | bidi-override | initial | inherit;
Property values
| Value | Description |
|---|---|
| normal | The element does not open additional levels of embedding. This is default. |
| embed | Opens an additional embedding level for inline elements. |
| bidi-override | For inline elements, this creates overrides. For block containers, it overrides inline descendants. |
| isolate | Treats the element as an isolated text from its siblings. |
| isolate-override | Combines the isolation of isolate with the override of bidi-override for inner content. |
| plaintext | Similar to isolate, but the base direction uses the heuristic rules of the Unicode bidirectional algorithm. |
| initial | Sets the property to its default value. |
| inherit | The element inherits the property value from its parent element. |
CSS Vertical Alignment
➔ The vertical-align property specifies the vertical alignment of an element.
Syntax
vertical-align: baseline|length|sub|super|top|text-top|middle|bottom|text-bottom|initial|inherit;
Property values
| Value | Description |
|---|---|
| baseline | Aligns the element's baseline with the parent's. This is default. |
| length | Increases or decreases an element by a specified length. |
| percentage | Increases or decreases an element by a percentage of the "line-height" property. |
| sub | Renders the element as a subscript. |
| super | Renders the element as a superscript. |
| top | Aligns the top of the element with the top of the line. |
| text-top | Aligns the top of the element with the top of the parent's font. |
| middle | Aligns the vertical midpoint of the element. |
| bottom | Aligns the bottom of the element with the bottom of the line. |
| text-bottom | Aligns the bottom of the element with the bottom of the parent's font. |
| initial | Sets the property to its default value. |
| inherit | The element inherits the property value from its parent element. |
Example
#p1 {
vertical-align: baseline;
}
#p2 {
vertical-align: text-top;
}
#p3 {
vertical-align: text-bottom;
}
#p4 {
vertical-align: sub;
}
#p5 {
vertical-align: super;
}
Click on the "Try it Now" button to see how it works.