mozilla

Revision 292786 of text-align

  • Revision slug: CSS/text-align
  • Revision title: text-align
  • Revision id: 292786
  • Created:
  • Creator: teoli
  • Is current revision? No
  • Comment

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() }}: start, or a nameless value that acts as left if {{ cssxref("direction") }} is ltr, right if {{ cssxref("direction") }} is rtl if not supported by the browser.
  • Applies to: block level elements, table cells and inline-blocks
  • {{ Xref_cssinherited() }}: yes
  • Media: {{ Xref_cssvisual() }}
  • {{ Xref_csscomputed() }}: as specified

Syntax

 text-align:  [ [ start | end | left | right | center ] || <string> ] | justify | match-parent | start end

Values

 
start {{ experimental_inline() }}
The same as left if direction is left-to-right and right if direction is right-to-left.
end {{ experimental_inline() }}{{ gecko_minversion_inline("1.9.2") }}
The same as right if direction is left-to-right and left 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.
<string> {{ experimental_inline() }}
The first occurrence of the one-char string is the element used for alignment. the keyword that follows or precedes it indicates how it is aligned. This allows to align numeric values on the decimal point, for instance.
justify
The text is justified. Text should line up their left and right edges to the left and right content edges of the paragraph.

Mozilla Extensions

-moz-center {{ not_standard_inline() }}
Centers inline and also block content.
-moz-left {{ not_standard_inline() }}
Aligns inline and also block content.
-moz-right {{ not_standard_inline() }}
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;

Specifications

Specification Status Comment
{{ SpecName('CSS3 Text', '#text-align', 'visibility') }} {{ Spec2('CSS3 Text') }} Added the start and end keyword. Changed the unnamed initial value to start (which it was). Added the {{ xref_cssstring() }} value, the match-end value and the start end double value.
{{ SpecName('CSS2.1', 'text.html#text-align', 'text-align') }} {{ Spec2('CSS2.1') }} No changes
{{ SpecName('CSS1', '#text-align', 'text-align') }} {{ Spec2('CSS1') }} Initial definition.

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") }}

Revision Source

<p>{{ CSSRef() }}</p>
<h2 id="Summary">Summary</h2>
<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 class="cssprop">
  <li><dfn>{{ Xref_cssinitial() }}:</dfn> <code>start</code>, or a nameless value that acts as <code>left</code> if {{ cssxref("direction") }} is <code>ltr</code>, <code>right</code> if {{ cssxref("direction") }} is <code>rtl</code> if not supported by the browser.</li>
  <li><dfn>Applies to:</dfn> block level elements, table cells and inline-blocks</li>
  <li><dfn>{{ Xref_cssinherited() }}:</dfn> yes</li>
  <li><dfn>Media:</dfn> {{ Xref_cssvisual() }}</li>
  <li><dfn>{{ Xref_csscomputed() }}:</dfn> as specified</li>
</ul>
<h2 id="Syntax">Syntax</h2>
<pre class="eval">
 text-align:  [ [ start | end | left | right | center ] || &lt;string&gt; ] | justify | match-parent | start end
</pre>
<h3 id="Values">Values</h3>
<dl>
  <dt>
    &nbsp;</dt>
  <dt>
    <code>start</code> {{ experimental_inline() }}</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>
    <code>end</code> {{ experimental_inline() }}{{ 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>
  <dt>
    <code>left</code></dt>
  <dd>
    The inline contents are aligned to the left edge of the line box.</dd>
  <dt>
    <code>right</code></dt>
  <dd>
    The inline contents are aligned to the right edge of the line box.</dd>
  <dt>
    <code>center</code></dt>
  <dd>
    The inline contents are centered within the line box.</dd>
  <dt>
    <code>&lt;string&gt;</code> {{ experimental_inline() }}</dt>
  <dd>
    The first occurrence of the one-char string is the element used for alignment. the keyword that follows or precedes it indicates how it is aligned. This allows to align numeric values on the decimal point, for instance.</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>
</dl>
<h4 id="Mozilla_Extensions">Mozilla Extensions</h4>
<dl>
  <dt>
    -moz-center {{ not_standard_inline() }}</dt>
  <dd>
    Centers inline and also block content.</dd>
  <dt>
    -moz-left {{ not_standard_inline() }}</dt>
  <dd>
    Aligns inline and also block content.</dd>
  <dt>
    -moz-right {{ not_standard_inline() }}</dt>
  <dd>
    Aligns inline and also block content.</dd>
</dl>
<h2 id="Examples">Examples</h2>
<p>{{ CSSRefExampleLink("text-align") }}</p>
<h3 id="Live_Examples">Live Examples</h3>
<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 id="Notes">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>&nbsp;or&nbsp;<code>margin:0 auto;</code>&nbsp;or&nbsp;<code> margin-left:auto; margin-right:auto;</code></p>
<h2 id="Specifications">Specifications</h2>
<table class="standard-table">
  <thead>
    <tr>
      <th scope="col">Specification</th>
      <th scope="col">Status</th>
      <th scope="col">Comment</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>{{ SpecName('CSS3 Text', '#text-align', 'visibility') }}</td>
      <td>{{ Spec2('CSS3 Text') }}</td>
      <td>Added the <code>start</code> and <code>end</code> keyword. Changed the unnamed initial value to <code>start</code> (which it was). Added the {{ xref_cssstring() }} value, the <code>match-end</code> value and the <code>start end</code> double value.</td>
    </tr>
    <tr>
      <td>{{ SpecName('CSS2.1', 'text.html#text-align', 'text-align') }}</td>
      <td>{{ Spec2('CSS2.1') }}</td>
      <td>No changes</td>
    </tr>
    <tr>
      <td>{{ SpecName('CSS1', '#text-align', 'text-align') }}</td>
      <td>{{ Spec2('CSS1') }}</td>
      <td>Initial definition.</td>
    </tr>
  </tbody>
</table>
<h2 id="Browser_compatibility">Browser compatibility</h2>
<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>
<h2 id="Specifications">Specifications</h2>
<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>
<h2 id="See_also">See also</h2>
<ul>
  <li>{{ Cssxref("margin","margin:auto") }}, {{ Cssxref("margin-left","margin-left:auto") }}, {{ Cssxref("vertical-align") }}</li>
</ul>
Revert to this revision