mozilla

Revision 11695 of text-align

  • Revision slug: CSS/text-align
  • Revision title: text-align
  • Revision id: 11695
  • Created:
  • Creator: Jürgen Jeka
  • Is current revision? No
  • Comment browser compatibility; example added; 144 words added, 6 words removed; page display name reset to default

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 | 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
Is CSS3 for left if direction is left-to-right and right if direction is right-to-left.
end {{ gecko_minversion_inline("1.9.2") }}
Is CSS3 for 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

[add note about centering of blocks]

Specifications

Browser compatibility

Browser Lowest Version start end Block centering
Internet Explorer 3.0 --- --- ---
Firefox (Gecko) 1.0 (1.0) 1.0 (1.0) future (1.9.2) 1.0 (1.0) -moz-left | -moz-center | -moz-right
Opera 3.5 --- --- ---
Safari (WebKit) 1.0 (85) 3.1 (525) 3.1 (525) ? (?) -khtml-left | -khtml-center | -khtml-right
? (?) -webkit-left | -webkit-center | -webkit-right

See also

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

{{ languages( { "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> text-align:  left | center | right | justify | start | end | 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>Is CSS3 for<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>Is CSS3 for<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>[add note about centering of blocks]</p>
<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>Browser compatibility</h3>
<table class="standard-table"> <tbody> <tr> <th>Browser</th> <th>Lowest Version</th> <th><code>start</code></th> <th><code>end</code></th> <th colspan="2">Block centering</th> </tr> <tr> <td>Internet Explorer</td> <td>3.0</td> <td>---</td> <td>---</td> <td colspan="2">---</td> </tr> <tr> <td>Firefox (Gecko)</td> <td>1.0 (1.0)</td> <td>1.0 (1.0)</td> <td>future (1.9.2)</td> <td>1.0 (1.0)</td> <td><code>-moz-left | -moz-center | -moz-right</code></td> </tr> <tr> <td>Opera</td> <td>3.5</td> <td>---</td> <td>---</td> <td colspan="2">---</td> </tr> <tr> <td rowspan="2">Safari (WebKit)</td> <td rowspan="2">1.0 (85)</td> <td rowspan="2">3.1 (525)</td> <td rowspan="2">3.1 (525)</td> <td>? (?)</td> <td><code>-khtml-left | -khtml-center | -khtml-right</code></td> </tr> <tr> <td>? (?)</td> <td><code>-webkit-left | -webkit-center | -webkit-right</code></td> </tr> </tbody>
</table>
<h3>See also</h3>
<p>{{ CSS_Reference:Text() }}, {{ Cssxref("margin") }} (<code>auto</code>), {{ Cssxref("margin-left") }} (<code>auto</code>), {{ Cssxref("margin-right") }} (<code>auto</code>), {{ Cssxref("vertical-align") }}</p>
<p>{{ languages( { "fr": "fr/CSS/text-align", "it": "it/CSS/text-align" } ) }}</p>
Revert to this revision