CSS property text-align specifies how the inline-level content of a block is aligned along the inline axis. Note that text-align will also affect inline and inline-block elements in addition to text.
CSS property text-align
| CSS version: | CSS 2.1 |
| Value: | left | right | center | justify | inherit |
| Initial: | left if direction is ltr, right if direction is rtl |
| Applies to: | block containers |
| Inherited: | yes |
| Percentages: | N/A |
| Animatable: | no |
text-align values
| left | align left in each line box |
| right | align right in each line box |
| center | align center in each line box |
| justify | strech spaces so that first word aligns left and last word aligns right. This way all line boxes have same with (execept last one). |
| inherit | inherit value from parent container |
Examples – left, right and justify text-align
In the following code, CSS property text-align can be changed to the following values
- left
- right
- justify
<style>
.box {
width: 200px;
background-color: lightgreen;
text-align: left;
}
</style>
<div class="box">
This is some text which is inside a block element. It is created to see behaviour of property text-align.
</div>text-align refresh
Related
- CSS letter-spacing - additional spacing between adjacent chars
- CSS text-decoration - underline, overline and strikeout text
- CSS text-indent - indent text in a block
- CSS text-transform - capitalize, uppercase and lowercase text
- CSS word-spacing - additional space between words
