text-align
Baseline Widely available *
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
* Some parts of this feature may have varying levels of support.
Thetext-alignCSS property sets the horizontal alignment of the inline-level content inside a block element or table-cell box. This means it works likevertical-align but in the horizontal direction.
Try it
text-align: start;text-align: end;text-align: center;text-align: justify;<section> <div> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p> </div></section>section { font-size: 1.5em;}#default-example > div { width: 250px;}Syntax
/* Keyword values */text-align: start;text-align: end;text-align: left;text-align: right;text-align: center;text-align: justify;text-align: match-parent;/* Block alignment values (Non-standard syntax) */text-align: -moz-center;text-align: -webkit-center;/* Global values */text-align: inherit;text-align: initial;text-align: revert;text-align: revert-layer;text-align: unset;Thetext-align property is specified as a single keyword from the list below.
Values
startThe same as
leftif direction is left-to-right andrightif direction is right-to-left.endThe same as
rightif direction is left-to-right andleftif direction is right-to-left.leftThe inline contents are aligned to the left edge of the line box.
rightThe inline contents are aligned to the right edge of the line box.
centerThe inline contents are centered within the line box.
justifyThe inline contents are justified. Spaces out the content to line up its left and right edges to the left and right edges of the line box, except for the last line.
match-parentSimilar to
inherit, but the valuesstartandendare calculated according to the parent'sdirectionand are replaced by the appropriateleftorrightvalue.
Accessibility
The inconsistent spacing between words created by justified text can be problematic for people with cognitive concerns such as Dyslexia.
Formal definition
| Initial value | start, or a nameless value that acts asleft ifdirection isltr,right ifdirection isrtl ifstart is not supported by the browser. |
|---|---|
| Applies to | block containers |
| Inherited | yes |
| Computed value | as specified, except for thematch-parent value which is calculated against its parent'sdirection value and results in a computed value of eitherleft orright |
| Animation type | discrete |
Formal syntax
text-align =
start|
end|
left|
right|
center|
<string>|
justify|
match-parent|
justify-all
Examples
Start alignment
HTML
<p> Integer elementum massa at nulla placerat varius. Suspendisse in libero risus, in interdum massa. Vestibulum ac leo vitae metus faucibus gravida ac in neque. Nullam est eros, suscipit sed dictum quis, accumsan a ligula.</p>CSS
.example { text-align: start; border: solid;}Result
Centered text
HTML
<p> Integer elementum massa at nulla placerat varius. Suspendisse in libero risus, in interdum massa. Vestibulum ac leo vitae metus faucibus gravida ac in neque. Nullam est eros, suscipit sed dictum quis, accumsan a ligula.</p>CSS
.example { text-align: center; border: solid;}Result
Example using "justify"
HTML
<p> Integer elementum massa at nulla placerat varius. Suspendisse in libero risus, in interdum massa. Vestibulum ac leo vitae metus faucibus gravida ac in neque. Nullam est eros, suscipit sed dictum quis, accumsan a ligula.</p>CSS
.example { text-align: justify; border: solid;}Result
Table alignment
This example demonstrates the use oftext-align on<table> elements:
- The
<caption>is set to right-aligned. - The first two
<th>elements inherit the left alignment from thetext-align: leftset on the<thead>, while the third is set to right-aligned. - Inside the
<tbody>element, the first row is set to right-aligned, the second is set to center-aligned, and the third uses the default (left) alignment. - Within each row, some cells (c12, c31) are set to override the alignment of the row.
HTML
<table> <caption> Example table </caption> <thead> <tr> <th>Col 1</th> <th>Col 2</th> <th>Col 3</th> </tr> </thead> <tbody> <tr> <td>11</td> <td>12</td> <td>13</td> </tr> <tr> <td>21</td> <td>22</td> <td>23</td> </tr> <tr> <td>31</td> <td>32</td> <td>33</td> </tr> </tbody></table>CSS
table { border-collapse: collapse; border: solid black 1px; width: 250px; height: 150px;}thead { text-align: left;}td,th { border: solid 1px black;}.center { text-align: center;}.right,caption { text-align: right;}Result
Specifications
| Specification |
|---|
| CSS Logical Properties and Values Level 1 # text-align |
| CSS Text Module Level 3 # text-align-property |