text-align

  • Revision slug: CSS/text-align
  • Revision title: text-align
  • Revision id: 357375
  • 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}} {{cssinitial("text-align")}}
  • Applies to block level elements, table cells and inline-blocks
  • {{Xref_cssinherited}} yes
  • Media {{Xref_cssvisual}}
  • {{Xref_csscomputed}} as specified

Syntax

Formal syntax: {{csssyntax("text-align")}}
text-align: left
text-align: right
text-align: center
text-align: justify
text-align: start
text-align: end
text-align: match-parent
text-align: start end
text-align: "."
text-align: start "."
text-align: "." end

text-align: inherit

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}}
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.
match-parent {{experimental_inline}}
Similar to inherit with the difference that the value start and end are calculated according the parent's {{cssxref("direction")}} and are replaced by the adequate left or right value.

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-parent 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

{{CompatibilityTable}}

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support (left, right, center and justify) 1.0 {{CompatGeckoDesktop("1.0")}} 3.0 3.5 1.0 (85)
Block alignment values [1] {{not_standard_inline}} 1.0{{property_prefix("-webkit")}} {{CompatGeckoDesktop("1.0")}}{{property_prefix("-moz")}} {{CompatNo}} {{CompatNo}} 1.0 (85){{property_prefix("-khtml")}}
1.3 (312){{property_prefix("-webkit")}}
start {{experimental_inline}} 1.0 {{CompatGeckoDesktop("1.0")}} {{CompatNo}} {{CompatVersionUnknown}} 3.1 (525)
end {{experimental_inline}} 1.0 {{CompatGeckoDesktop("1.9.2")}} {{CompatNo}} {{CompatNo}} 3.1 (525)
match-parent{{experimental_inline}} 16 {{CompatNo}} {{CompatNo}} {{CompatNo}} {{CompatNo}}
{{xref_cssstring}} value{{experimental_inline}} {{CompatNo}} {{CompatNo}} {{CompatNo}} {{CompatNo}} {{CompatNo}}
Feature Android Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}}
Block alignment values [1] {{not_standard_inline}} {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}}
start {{experimental_inline}} {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}}
end {{experimental_inline}} {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}}
match-parent{{experimental_inline}} {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}}
{{xref_cssstring}} value{{experimental_inline}} {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}}

[1] Both WebKit and Gecko supports a prefixed version of left, center, and right, that applies not only to inline content but also to block elements. This is used to implement the legacy {{htmlattrxref("align", "td")}} attributes on some table-related element. Do not use these on production Web sites.

See also

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

Revision Source

<div>
  {{CSSRef}}</div>
<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> {{cssinitial("text-align")}}</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="twopartsyntaxbox">
<a href="/en-US/docs/CSS/Value_definition_syntax" title="CSS/Value_definition_syntax">Formal syntax</a>: {{csssyntax("text-align")}}
</pre>
<pre>
text-align: left
text-align: right
text-align: center
text-align: justify
text-align: start
text-align: end
text-align: match-parent
text-align: start end
text-align: "."
text-align: start "."
text-align: "." end

text-align: inherit
</pre>
<h3 id="Values">Values</h3>
<dl>
  <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}}</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>
    <code>justify</code></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>
    <code>match-parent</code> {{experimental_inline}}</dt>
  <dd>
    Similar to <code>inherit</code> with the difference that the value <code>start</code> and <code>end</code> are calculated according the parent's {{cssxref("direction")}} and are replaced by the adequate <code>left</code> or <code>right</code> value.</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-parent</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>
<p>{{CompatibilityTable}}</p>
<div id="compat-desktop">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Feature</th>
        <th>Chrome</th>
        <th>Firefox (Gecko)</th>
        <th>Internet Explorer</th>
        <th>Opera</th>
        <th>Safari</th>
      </tr>
      <tr>
        <td>Basic support (<code>left</code>, <code>right</code>, <code>center</code> and <code>justify</code>)</td>
        <td>1.0</td>
        <td>{{CompatGeckoDesktop("1.0")}}</td>
        <td>3.0</td>
        <td>3.5</td>
        <td>1.0 (85)</td>
      </tr>
      <tr>
        <td>Block alignment values [1] {{not_standard_inline}}</td>
        <td>1.0{{property_prefix("-webkit")}}</td>
        <td>{{CompatGeckoDesktop("1.0")}}{{property_prefix("-moz")}}</td>
        <td>{{CompatNo}}</td>
        <td>{{CompatNo}}</td>
        <td>1.0 (85){{property_prefix("-khtml")}}<br />
          1.3 (312){{property_prefix("-webkit")}}</td>
      </tr>
      <tr>
        <td><code>start</code> {{experimental_inline}}</td>
        <td>1.0</td>
        <td>{{CompatGeckoDesktop("1.0")}}</td>
        <td>{{CompatNo}}</td>
        <td>{{CompatVersionUnknown}}</td>
        <td>3.1 (525)</td>
      </tr>
      <tr>
        <td><code>end</code> {{experimental_inline}}</td>
        <td>1.0</td>
        <td>{{CompatGeckoDesktop("1.9.2")}}</td>
        <td>{{CompatNo}}</td>
        <td>{{CompatNo}}</td>
        <td>3.1 (525)</td>
      </tr>
      <tr>
        <td><code>match-parent</code>{{experimental_inline}}</td>
        <td>16</td>
        <td>{{CompatNo}}</td>
        <td>{{CompatNo}}</td>
        <td>{{CompatNo}}</td>
        <td>{{CompatNo}}</td>
      </tr>
      <tr>
        <td>{{xref_cssstring}} value{{experimental_inline}}</td>
        <td>{{CompatNo}}</td>
        <td>{{CompatNo}}</td>
        <td>{{CompatNo}}</td>
        <td>{{CompatNo}}</td>
        <td>{{CompatNo}}</td>
      </tr>
    </tbody>
  </table>
</div>
<div id="compat-mobile">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Feature</th>
        <th>Android</th>
        <th>Chrome for Android</th>
        <th>Firefox Mobile (Gecko)</th>
        <th>IE Mobile</th>
        <th>Opera Mobile</th>
        <th>Safari Mobile</th>
      </tr>
      <tr>
        <td>Basic support</td>
        <td>{{CompatUnknown}}</td>
        <td>{{CompatUnknown}}</td>
        <td>{{CompatUnknown}}</td>
        <td>{{CompatUnknown}}</td>
        <td>{{CompatUnknown}}</td>
        <td>{{CompatUnknown}}</td>
      </tr>
      <tr>
        <td>Block alignment values [1] {{not_standard_inline}}</td>
        <td>{{CompatUnknown}}</td>
        <td>{{CompatUnknown}}</td>
        <td>{{CompatUnknown}}</td>
        <td>{{CompatUnknown}}</td>
        <td>{{CompatUnknown}}</td>
        <td>{{CompatUnknown}}</td>
      </tr>
      <tr>
        <td><code>start</code> {{experimental_inline}}</td>
        <td>{{CompatUnknown}}</td>
        <td>{{CompatUnknown}}</td>
        <td>{{CompatUnknown}}</td>
        <td>{{CompatUnknown}}</td>
        <td>{{CompatUnknown}}</td>
        <td>{{CompatUnknown}}</td>
      </tr>
      <tr>
        <td><code>end</code> {{experimental_inline}}</td>
        <td>{{CompatUnknown}}</td>
        <td>{{CompatUnknown}}</td>
        <td>{{CompatUnknown}}</td>
        <td>{{CompatUnknown}}</td>
        <td>{{CompatUnknown}}</td>
        <td>{{CompatUnknown}}</td>
      </tr>
      <tr>
        <td><code>match-parent</code>{{experimental_inline}}</td>
        <td>{{CompatUnknown}}</td>
        <td>{{CompatUnknown}}</td>
        <td>{{CompatUnknown}}</td>
        <td>{{CompatUnknown}}</td>
        <td>{{CompatUnknown}}</td>
        <td>{{CompatUnknown}}</td>
      </tr>
      <tr>
        <td>{{xref_cssstring}} value{{experimental_inline}}</td>
        <td>{{CompatUnknown}}</td>
        <td>{{CompatUnknown}}</td>
        <td>{{CompatUnknown}}</td>
        <td>{{CompatUnknown}}</td>
        <td>{{CompatUnknown}}</td>
        <td>{{CompatUnknown}}</td>
      </tr>
    </tbody>
  </table>
</div>
<p>[1] Both WebKit and Gecko supports a prefixed version of <code>left</code>, <code>center</code>, and <code>right</code>, that applies not only to inline content but also to block elements. This is used to implement the legacy {{htmlattrxref("align", "td")}} attributes on some table-related element. Do not use these on production Web sites.</p>
<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