The CSS text-align property sets the horizontal alignment of inline-level content (such as text, inline-blocks, or images) inside a block-level element or a table-cell box.
This property works similarly to vertical-align, but it controls the content strictly in the horizontal direction.
The text-align property is specified as a single keyword.
Syntax:
element {
text-align: start | end | left | right | center | justify | match-parent;
}
| Value | Description |
|---|---|
start |
The same as left if the text direction is left-to-right, and right if the direction is right-to-left. |
end |
The same as right if the text direction is left-to-right, and left if the direction is right-to-left. |
left |
The inline contents are aligned strictly to the left edge of the line box. |
right |
The inline contents are aligned strictly to the right edge of the line box. |
center |
The inline contents are perfectly centered within the line box. |
justify |
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 calculated based on the parent's reading direction. |
Let's explore how different text-align values affect the layout of your content.
The start value is a logical property that adapts to the language's writing direction, whereas left is an absolute physical direction.
<!DOCTYPE html>
<html>
<head>
<style>
.align-start {
text-align: start;
border: 2px solid navy;
padding: 10px;
background-color: #f4f4f9;
}
</style>
</head>
<body>
<p class="align-start">
This text uses <code>text-align: start;</code>. In English (left-to-right), it aligns to the left edge of the container. If this page were in Arabic (right-to-left), it would automatically align to the right edge.
</p>
</body>
</html>
The center value aligns the content directly in the middle of its container.
<!DOCTYPE html>
<html>
<head>
<style>
.align-center {
text-align: center;
border: 2px solid navy;
padding: 10px;
background-color: lightblue;
}
</style>
</head>
<body>
<p class="align-center">
This text uses <code>text-align: center;</code>. The inline contents are centered within the line box, creating an even amount of space on both the left and right sides.
</p>
</body>
</html>
The justify value stretches the text so that every line has equal width, similar to text in a newspaper or magazine.
<!DOCTYPE html>
<html>
<head>
<style>
.align-justify {
text-align: justify;
border: 2px solid navy;
padding: 10px;
width: 300px;
}
</style>
</head>
<body>
<p class="align-justify">
This text uses <code>text-align: justify;</code>. Notice how the browser automatically adjusts the spacing between the words so that both the left and right edges of the text block align perfectly with the border of the container.
</p>
</body>
</html>
Accessibility Note: The inconsistent spacing between words created by justified text can be problematic for people with cognitive concerns such as Dyslexia. It is generally recommended to avoid fully justified text on the web unless necessary for specific design requirements.
The text-align property is highly effective when used within <table> elements to organize data neatly.
In the example below:
<caption> is set to right-aligned.<thead> sets its cells to left-aligned, but the third heading overrides it to right-aligned.<tbody> use individual classes to change their alignment dynamically.
<!DOCTYPE html>
<html>
<head>
<style>
table {
border-collapse: collapse;
border: 1px solid navy;
width: 100%;
max-width: 400px;
font-family: sans-serif;
}
thead {
text-align: left;
background-color: lightblue;
}
td, th {
border: 1px solid navy;
padding: 8px;
}
.center {
text-align: center;
}
.right, caption {
text-align: right;
}
</style>
</head>
<body>
<table>
<caption>Example Table Data</caption>
<thead>
<tr>
<th>Col 1 (Left)</th>
<th>Col 2 (Left)</th>
<th class="right">Col 3 (Right)</th>
</tr>
</thead>
<tbody>
<tr class="right">
<td>11</td>
<td class="center">12 (Center)</td>
<td>13</td>
</tr>
<tr class="center">
<td>21</td>
<td>22</td>
<td>23</td>
</tr>
<tr>
<td class="right">31 (Right)</td>
<td>32 (Default Left)</td>
<td>33 (Default Left)</td>
</tr>
</tbody>
</table>
</body>
</html>
<div>, <p>) and table-cells.text-align value of their parent unless specified otherwise.start (or left/right depending on the browser's language direction if start is unsupported).Which value of the text-align property automatically aligns text to the left in English, but to the right in languages like Arabic?