text-align

  • Revision slug: CSS/text-align
  • Revision title: text-align
  • Revision id: 11702
  • Created:
  • Creator: fscholz
  • Is current revision? No
  • Comment +de / -"template."; 12 words added, 22 words removed

Revision Content

{{ CSSRef() }}

Summary

The text-align CSS property describes how inline content like text is aligned in its parent block element. text-align does not control the alignment of block elements itself, only their inline content.

  • {{ Xref_cssinitial() }}: a nameless value that acts as left if 'direction' is 'ltr', right if 'direction' is 'rtl'
  • Applies to: block level elements, table cells and inline-blocks
  • {{ Xref_cssinherited() }}: yes
  • Media: {{ Xref_cssvisual() }}
  • {{ Xref_csscomputed() }}: as specified

Syntax

 text-align:  left | center | right | justify | start | end | -moz-left | -moz-center | -moz-right | {{ Cssxref("inherit") }}

Values

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 text is justified. Text should line up their left and right edges to the left and right content edges of the paragraph.
start
The same as left if direction is left-to-right and right if direction is right-to-left.
end {{ gecko_minversion_inline("1.9.2") }}
The same as right if direction is left-to-right and left if direction is right-to-left.

Mozilla Extensions

-moz-center
Centers inline and also block content.
-moz-left
Aligns inline and also block content.
-moz-right
Aligns inline and also block content.

Examples

{{ CSSRefExampleLink("text-align") }}

Live Examples

div { text-align: center; border:solid; }

p { background:gold; width:22em; }

some more inline content...
div { text-align: center; border:solid; }

p { background:gold; width:22em; margin: 1em auto; }

some more inline content...
div { text-align:-moz-center; text-align:-webkit-center; border:solid; }

p { background:gold; width:22em; }

some more inline content...

Notes

The standard-compatible way to center a block itself without centering its inline content is setting the left and right margin to auto, e.g.:
margin:auto;  or  margin:0 auto;  or  margin-left:auto; margin-right:auto;

Browser compatibility

Browser Basic support Block alignment values start value end value
Internet Explorer 3.0 --- --- ---
Firefox (Gecko) 1.0 (1.0) 1.0 (1.0) -moz-left | -moz-center | -moz-right 1.0 (1.0) 3.6 (1.9.2)
Opera 3.5 --- --- ---
Safari (WebKit) 1.0 (85) 1.0 (85) -khtml-left | -khtml-center | -khtml-right 3.1 (525) 3.1 (525)
1.3 (312) -khtml-left | -khtml-center | -khtml-right |
-webkit-left | -webkit-center | -webkit-right

Specifications

See also

{{ Cssxref("margin","margin:auto") }}, {{ Cssxref("margin-left","margin-left:auto") }}, {{ Cssxref("vertical-align") }}

{{ languages( { "de": "de/CSS/text-align", "fr": "fr/CSS/text-align", "it": "it/CSS/text-align" } ) }}

Revision Source

<p>{{ CSSRef() }}</p>
<h3>Summary</h3>
<p>The<code> text-align </code>CSS property describes how inline content like text is aligned in its parent block element.<code> text-align </code>does not control the alignment of block elements itself, only their inline content.</p>
<ul> <li>{{ Xref_cssinitial() }}: a nameless value that acts as<code> left </code>if 'direction' is 'ltr',<code> right </code>if 'direction' is 'rtl'</li> <li>Applies to: block level elements, table cells and inline-blocks</li> <li>{{ Xref_cssinherited() }}: yes</li> <li>Media: {{ Xref_cssvisual() }}</li> <li>{{ Xref_csscomputed() }}: as specified</li>
</ul>
<h3>Syntax</h3>
<pre class="eval"> text-align:  left | center | right | justify | start | end | -moz-left | -moz-center | -moz-right | {{ Cssxref("inherit") }}
</pre>
<h3>Values</h3>
<dl> <dt>left</dt> <dd>The inline contents are aligned to the left edge of the line box.</dd> <dt>right</dt> <dd>The inline contents are aligned to the right edge of the line box.</dd> <dt>center</dt> <dd>The inline contents are centered within the line box.</dd> <dt>justify</dt> <dd>The text is justified. Text should line up their left and right edges to the left and right content edges of the paragraph.</dd> <dt>start</dt> <dd>The same as<code> left </code>if direction is left-to-right and<code> right </code>if direction is right-to-left.</dd> <dt>end {{ gecko_minversion_inline("1.9.2") }}</dt> <dd>The same as<code> right </code>if direction is left-to-right and<code> left </code>if direction is right-to-left.</dd>
</dl>
<h4>Mozilla Extensions</h4>
<dl> <dt>-moz-center</dt> <dd>Centers inline and also block content.</dd> <dt>-moz-left</dt> <dd>Aligns inline and also block content.</dd> <dt>-moz-right</dt> <dd>Aligns inline and also block content.</dd>
</dl>
<h3>Examples</h3>
<p>{{ CSSRefExampleLink("text-align") }}</p>
<h4>Live Examples</h4>
<div style="text-align:center; border:solid; margin:1em 0">div { <strong>text-align: center</strong>; border:solid; }
<p style="background:gold; width:22em; margin:1em 0">p { background:gold; width:22em; }</p>
some more inline content...</div>
<div style="text-align:center; border:solid; margin:1em 0">div { <strong>text-align: center</strong>; border:solid; }
<p style="background:gold; width:22em; margin:1em auto">p { background:gold; width:22em; <strong>margin: 1em auto</strong>; }</p>
some more inline content...</div>
<div style="text-align:-moz-center; text-align:-webkit-center; border:solid;  margin:1em 0">div { <strong>text-align:-moz-center</strong>; text-align:-webkit-center; border:solid; }
<p style="background:gold; width:22em; margin:1em 0">p { background:gold; width:22em; }</p>
some more inline content...</div>
<h3>Notes</h3>
<p>The standard-compatible way to center a block itself without centering its inline content is setting the left and right<code> margin </code>to auto, e.g.:<br>
<code>margin:auto;  </code>or<code>  margin:0 auto;  </code>or <code> margin-left:auto; margin-right:auto;</code></p>
<h3>Browser compatibility</h3>
<table class="standard-table"> <tbody> <tr> <th>Browser</th> <th>Basic support</th> <th colspan="2">Block alignment values</th> <th><code>start </code>value</th> <th><code>end </code>value</th> </tr> <tr> <td>Internet Explorer</td> <td>3.0</td> <td colspan="2">---</td> <td>---</td> <td>---</td> </tr> <tr> <td>Firefox (Gecko)</td> <td>1.0 (1.0)</td> <td>1.0 (1.0)</td> <td><code>-moz-left | -moz-center | -moz-right</code></td> <td>1.0 (1.0)</td> <td>3.6 (1.9.2)</td> </tr> <tr> <td>Opera</td> <td>3.5</td> <td colspan="2">---</td> <td>---</td> <td>---</td> </tr> <tr> <td rowspan="2">Safari (WebKit)</td> <td rowspan="2">1.0 (85)</td> <td>1.0 (85)</td> <td><code>-khtml-left | -khtml-center | -khtml-right</code></td> <td rowspan="2">3.1 (525)</td> <td rowspan="2">3.1 (525)</td> </tr> <tr> <td>1.3 (312)</td> <td><code>-khtml-left | -khtml-center | -khtml-right |<br> -webkit-left | -webkit-center | -webkit-right</code></td> </tr> </tbody>
</table>
<h3>Specifications</h3>
<ul> <li><a class="external" href="http://www.w3.org/TR/CSS21/text.html#alignment-prop">CSS 2.1 Text #text-align </a></li> <li><a class="external" href="http://www.w3.org/TR/css3-text/#text-align" title="http://www.w3.org/TR/css3-text/#text-align">CSS 3 Text #text-align</a> Working draft</li>
</ul>
<h3>See also</h3>
<p>{{ Cssxref("margin","margin:auto") }}, {{ Cssxref("margin-left","margin-left:auto") }}, {{ Cssxref("vertical-align") }}</p>
<p>{{ languages( { "de": "de/CSS/text-align", "fr": "fr/CSS/text-align", "it": "it/CSS/text-align" } ) }}</p>
Revert to this revision