mozilla

Revision 11693 of text-align

  • Revision slug: CSS/text-align
  • Revision title: text-align
  • Revision id: 11693
  • Created:
  • Creator: Jürgen Jeka
  • Is current revision? No
  • Comment 144 words added, 140 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() }}: user-agent specific and can depend on writing direction
  • Applies to: all block level elements
  • {{ 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 block content.
-moz-left
Aligns inline and block content.
-moz-right
Aligns inline and block content.

Examples

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

p.left { text-align: left }

p.right { text-align: right }

Notes

Specifications

Browser compatibility

Browser Lowest Version start end
Internet Explorer 3.0 --- ---
Firefox (Gecko) 1.0 (1.0) 1.0 (1.0) future (1.9.2)
Opera 3.5 --- ---
Safari (WebKit) 1.0 (85) yes ?(?) yes ?(?)

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() }}: user-agent specific and can depend on writing direction</li> <li>Applies to: all block level elements</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.<code><br>
</code></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.<code><br>
</code></dd></dl>
<h4>Mozilla Extensions</h4>
<dl><dt>-moz-center</dt><dd>Centers inline and block content.</dd><dt>-moz-left</dt><dd>Aligns inline and block content.</dd><dt>-moz-right</dt><dd>Aligns inline and block content.</dd></dl>
<h3>Examples</h3>
<p>{{ CSSRefExampleLink("text-align") }}</p>
<pre>p.left { text-align: left }

p.right { text-align: right }</pre>
<h3>Notes</h3>
<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> </tr> <tr> <td>Internet Explorer</td> <td>3.0</td> <td>---</td> <td>---</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> </tr> <tr> <td>Opera</td> <td>3.5</td> <td>---</td> <td>---</td> </tr> <tr> <td>Safari (WebKit)</td> <td>1.0 (85)</td> <td>yes ?(?)</td> <td>yes ?(?)</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