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.
The text-align
CSS property sets the horizontal alignment of the inline-level content inside a block element or table-cell box. This means it works like vertical-align
but in the horizontal direction.
Try it
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;
The text-align
property is specified as a single keyword from the list below.
Values
start
-
The same as
left
if direction is left-to-right andright
if direction is right-to-left. end
-
The same as
right
if direction is left-to-right andleft
if direction is right-to-left. left
-
The inline contents are aligned to the left edge of the line box.
right
-
The inline contents are aligned to the right edge of the line box.
center
-
The inline contents are centered within the line box.
justify
-
The 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-parent
-
Similar to
inherit
, but the valuesstart
andend
are calculated according to the parent'sdirection
and are replaced by the appropriateleft
orright
value.
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 as left if direction is ltr , right if direction is rtl if start is not supported by the browser. |
---|---|
Applies to | block containers |
Inherited | yes |
Computed value | as specified, except for the match-parent value which is calculated against its parent's direction value and results in a computed value of either left or right |
Animation type | discrete |
Formal syntax
Examples
Start alignment
HTML
<p class="example">
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 class="example">
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 class="example">
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 of text-align
on <table>
elements:
- The
<caption>
is set to right-aligned. - The first two
<th>
elements inherit the left alignment from thetext-align: left
set 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 class="right">Col 3</th>
</tr>
</thead>
<tbody>
<tr class="right">
<td>11</td>
<td class="center">12</td>
<td>13</td>
</tr>
<tr class="center">
<td>21</td>
<td>22</td>
<td>23</td>
</tr>
<tr id="r3">
<td class="right">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 |
Browser compatibility
BCD tables only load in the browser