path: root/files/zh-cn/web/css/text-align/index.html

---
title: text-align
slug: Web/CSS/text-align
tags:
  - CSS文字
  - 参考
  - 属性
  - 布局
translation_of: Web/CSS/text-align
---
<div>{{CSSRef}}</div>

<p><code>text-align</code> CSS属性定义行内内容（例如文字）如何相对它的块父元素对齐。<code>text-align</code> 并不控制块元素自己的对齐，只控制它的行内内容的对齐。</p>

<pre class="brush: css notranslate">/* Keyword values */
text-align: left;
text-align: right;
text-align: center;
text-align: justify;
text-align: justify-all;
text-align: start;
text-align: end;
text-align: match-parent;

/* Block alignment values (Non-standard syntax) */
text-align: -moz-center;
text-align: -webkit-center;

/* Global values */
text-align: inherit;
text-align: initial;
text-align: unset;</pre>

<p class="syntaxbox"></p>

<div class="hidden" id="text-align">
<pre class="brush: html notranslate">&lt;div class="grid"&gt;
  &lt;div class="col"&gt;
    &lt;div class="row"&gt;
      &lt;div class="cell"&gt;
        left
        &lt;p class="taLeft"&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam pellen tesque vehicu la con vallis.&lt;/p&gt;
      &lt;/div&gt;
      &lt;div class="cell"&gt;
        start (ltr)
        &lt;p class="taStart ltr"&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam pellen tesque vehicu la con vallis.&lt;/p&gt;
      &lt;/div&gt;
      &lt;div class="cell"&gt;
        start (rtl)
        &lt;p class="taStart rtl"&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam pellen tesque vehicu la con vallis.&lt;/p&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="row"&gt;
      &lt;div class="cell"&gt;
        right
        &lt;p class="taRight"&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam pellen tesque vehicu la con vallis.&lt;/p&gt;
      &lt;/div&gt;
      &lt;div class="cell"&gt;
        end (ltr)
        &lt;p class="taEnd ltr"&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam pellen tesque vehicu la con vallis.&lt;/p&gt;
      &lt;/div&gt;
      &lt;div class="cell"&gt;
        end (rtl)
        &lt;p class="taEnd rtl"&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam pellen tesque vehicu la con vallis.&lt;/p&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="row"&gt;
      &lt;div class="cell"&gt;
        center
        &lt;p class="taCenter"&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam pellen tesque vehicu la con vallis.&lt;/p&gt;
      &lt;/div&gt;
      &lt;div class="cell"&gt;
        justify
        &lt;p class="taJustify"&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam pellen tesque vehicu la con vallis.&lt;/p&gt;
      &lt;/div&gt;
      &lt;div class="cell"&gt;
        justify-all
        &lt;p class="taJustifyAll"&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam pellen tesque vehicu la con vallis.&lt;/p&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;</pre>

<pre class="brush: css notranslate">html,body {
  height: 100%;
  box-sizing: border-box;
}

.grid {
  width: 100%;
  height: 100%;
  display: flex;
  background: #EEE;
  font: 1em monospace;
}

.row {
  display: flex;
  flex: 1 auto;
  flex-direction: row;
}

.col {
  display: flex;
  flex: 1 auto;
  flex-direction: column;
}

.cell {
  width: calc(33.33% - 1em);
  box-sizing: border-box;
  margin: .5em;
  padding: .5em;
  background-color: #FFF;
  overflow: hidden;
}

@media (max-width: 30em) {
  .row {
    flex-direction: column;
  }
}

p {
  font: .8em sans-serif;
  max-width: 100%;
  box-sizing: border-box;
  overflow: hidden;
  resize: horizontal;
  background: #E4F0F5;
  padding: .5em;
  margin: .5em 0 0;
}

.taLeft       { text-align: left;        }
.taRight      { text-align: right;       }
.taCenter     { text-align: center;      }
.taJustify    { text-align: justify;     }
.taJustifyAll { text-align: justify-all; }
.taStart      { text-align: start;       }
.taEnd        { text-align: end;         }

.rtl { direction: rtl; }
.ltr { direction: ltr; }</pre>
</div>

<p>{{EmbedLiveSample("text-align", "100%", 350, "", "", "example-outcome-frame")}}</p>

<p>{{cssinfo}}</p>

<h2 id="语法" style="margin-bottom: 20px; line-height: 30px;">语法</h2>

<p>text-align属性指定为从以下值列表中选择的单个关键字。</p>

<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 0px;"></div>

<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 19px;"></div>

<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 38px;"></div>

<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 57px;"></div>

<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 76px;"></div>

<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 95px;"></div>

<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 114px;"></div>

<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 133px;"></div>

<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 152px;"></div>

<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 171px;"></div>

<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 190px;"></div>

<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 209px;"></div>

<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 228px;"></div>

<h3 id="Values" style="line-height: 24px;">Values</h3>

<dl>
 <dt><code>start</code> {{experimental_inline}}</dt>
 <dd>如果内容方向是左至右，则等于<code>left</code>，反之则为<code>right</code>。</dd>
 <dt><code>end</code> {{experimental_inline}}</dt>
 <dd>如果内容方向是左至右，则等于<code>right</code>，反之则为<code>left</code>。</dd>
 <dt><code>left</code></dt>
 <dd>行内内容向左侧边对齐。</dd>
 <dt><code>right</code></dt>
 <dd>行内内容向右侧边对齐。</dd>
 <dt><code>center</code></dt>
 <dd>行内内容居中。</dd>
 <dt><code>&lt;string&gt;</code> {{experimental_inline}}</dt>
 <dd>第一个出现的该（单字符）字符串被用来对齐。跟随的关键字定义对齐的方向。例如，可用于让数字值根据小数点对齐。</dd>
 <dt><code>justify</code></dt>
 <dd>文字向两侧对齐，对最后一行无效。</dd>
 <dt><code>justify-all</code></dt>
 <dd>和justify一致，但是强制使最后一行两端对齐。</dd>
 <dt><code>match-parent</code> {{experimental_inline}}</dt>
 <dd><font face="Open Sans, sans-serif">和</font><code>inherit</code>类似，区别在于<code>start</code>和<code>end</code>的值根据父元素的{{cssxref("direction")}}确定，并被替换为恰当的<code>left</code>或<code>right</code>。</dd>
</dl>

<h3 id="指示语法" style="line-height: 24px;">指示语法</h3>

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

<h2 id="示例" style="margin-bottom: 20px; line-height: 30px;">示例</h2>

<p><a href="/samples/cssref/text-align.html">查看在线演示</a></p>

<h3 id="Live_Examples" style="line-height: 24px;">Live Examples</h3>

<div style="margin-top: 1em; margin-bottom: 1em; border-style: solid; text-align: center;">div { <strong>text-align: center</strong>; border:solid; }

<p style="margin-top: 1em; margin-bottom: 1em; background-color: rgb(255, 215, 0); width: 22em;">p { background:gold; width:22em; }</p>
some more inline content...</div>

<div style="margin-top: 1em; margin-bottom: 1em; border-style: solid; text-align: center;">div { <strong>text-align: center</strong>; border:solid; }

<p style="margin: 1em auto; background-color: rgb(255, 215, 0); width: 22em;">p { background:gold; width:22em; <strong>margin: 1em auto</strong>; }</p>
some more inline content...</div>

<div style="">div { <strong>text-align:-moz-center</strong>; text-align:-webkit-center; border:solid; }

<p style="margin-top: 1em; margin-bottom: 1em; background-color: rgb(255, 215, 0); width: 22em;">p { background:gold; width:22em; }</p>
some more inline content...</div>

<h3 id="备注">备注</h3>

<p id=".E5.B1.85.E4.B8.AD.E4.B8.80.E4.B8.AA.E5.9D.97.E5.85.83.E7.B4.A0.E4.B8.94.E4.B8.8D.E5.B1.85.E4.B8.AD.E5.AE.83.E7.9A.84.E5.86.85.E8.81.94.E5.86.85.E5.AE.B9.E7.9A.84.E6.A0.87.E5.87.86.E5.85.BC.E5.AE.B9.E7.9A.84.E6.96.B9.E6.B3.95.E6.98.AF.E5.B0.86.E5.AE.83.E7.9A.84.E5.B7.A6.E3.80.81.E5.8F.B3margin.E8.AE.BE.E4.B8.BAauto.2C_.E4.BE.8B.E5.A6.82.EF.BC.9A"><span style="font-size: 14px; line-height: 1.5;">居中一个块元素且不居中它的行内内容的标准兼容的方法是将它的左、右</span><code style="line-height: 1.5; font-size: 14px; font-style: normal;">margin设为</code><span style="font-size: 14px; line-height: 1.5;">auto, 例如：</span></p>

<p><code>margin:auto;</code> 或<code>margin:0 auto;</code> 或<code>margin-left:auto; margin-right:auto;</code></p>

<h2 id="示例_2">示例</h2>

<h3 id="Left_alignment">Left alignment</h3>

<h4 id="HTML">HTML</h4>

<pre class="brush: html notranslate"><code>&lt;p class="example"&gt;
  Integer elementum massa at nulla placerat varius.
  Suspendisse in libero risus, in interdum massa.
  Vestibulum ac leo vitae metus faucibus gravida ac in neque.
  Nullam est eros, suscipit sed dictum quis, accumsan a ligula.
&lt;/p&gt;</code></pre>

<h4 id="CSS">CSS</h4>

<pre class="brush: css notranslate"><code>.example {
  text-align: left;
  border: solid;
}</code></pre>

<h4 id="Result">Result</h4>

<p>{{EmbedLiveSample("Left_alignment","100%","100%")}}</p>

<h3 id="Centered_text">Centered text</h3>

<h4 id="HTML_2">HTML</h4>

<pre class="brush: html notranslate"><code>&lt;p class="example"&gt;
  Integer elementum massa at nulla placerat varius.
  Suspendisse in libero risus, in interdum massa.
  Vestibulum ac leo vitae metus faucibus gravida ac in neque.
  Nullam est eros, suscipit sed dictum quis, accumsan a ligula.
&lt;/p&gt;</code></pre>

<h4 id="CSS_2">CSS</h4>

<pre class="brush: css notranslate"><code>.example {
  text-align: center;
  border: solid;
}</code></pre>

<h4 id="Result_2">Result</h4>

<p>{{EmbedLiveSample("Centered_text","100%","100%")}}</p>

<h3 id="Justify">Justify</h3>

<h4 id="HTML_3">HTML</h4>

<pre class="brush: html notranslate"><code>&lt;p class="example"&gt;
  Integer elementum massa at nulla placerat varius.
  Suspendisse in libero risus, in interdum massa.
  Vestibulum ac leo vitae metus faucibus gravida ac in neque.
  Nullam est eros, suscipit sed dictum quis, accumsan a ligula.
&lt;/p&gt;</code></pre>

<h4 id="CSS_3">CSS</h4>

<pre class="brush: css notranslate"><code>.example {
  text-align: justify;
  border: solid;
}</code></pre>

<h4 id="Result_3">Result</h4>

<p>{{EmbedLiveSample("Justify","100%","100%")}}</p>

<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 {{cssxref("margin")}} to <code>auto</code>, e.g.:</p>

<pre class="brush: css notranslate"><code>.something {
  margin: auto;
}</code></pre>

<pre class="brush: css notranslate"><code>.something {
  margin: 0 auto;
}</code></pre>

<pre class="brush: css notranslate"><code>.something {
  margin-left: auto;
  margin-right: auto;
}</code></pre>

<h2 id="规范" style="margin-bottom: 20px; line-height: 30px;">规范</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">规范</th>
   <th scope="col">状态</th>
   <th scope="col">备注</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('CSS3 Text', '#text-align', 'visibility')}}</td>
   <td>{{Spec2('CSS3 Text')}}</td>
   <td>添加了<code>start</code>和<code>end关键字</code> keyword. Changed the unnamed initial value to <code>start</code> (which it was). Added the {{cssxref("&lt;string&gt;")}} value, the <code>match-parent</code> value and the <code>start end</code> double value.</td>
  </tr>
  <tr>
   <td>{{SpecName('CSS2.1', 'text.html#alignment-prop', 'text-align')}}</td>
   <td>{{Spec2('CSS2.1')}}</td>
   <td>无改变</td>
  </tr>
  <tr>
   <td>{{SpecName('CSS1', '#text-align', 'text-align')}}</td>
   <td>{{Spec2('CSS1')}}</td>
   <td>首次定义</td>
  </tr>
 </tbody>
</table>

<h2 id="浏览器兼容性" style="margin-bottom: 20px; line-height: 30px;">浏览器兼容性</h2>

<p>{{CompatibilityTable}}</p>

<table>
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Chrome</th>
   <th>Edge</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>{{CompatVersionUnknown}}</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 {{non-standard_inline}}</td>
   <td>1.0{{property_prefix("-webkit")}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatGeckoDesktop("1.0")}}{{property_prefix("-moz")}}<sup>[1]</sup></td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>1.0 (85){{property_prefix("-khtml")}}<br>
    1.3 (312){{property_prefix("-webkit")}} [1]</td>
  </tr>
  <tr>
   <td><code>start</code> {{experimental_inline}}</td>
   <td>1.0</td>
   <td>{{CompatUnknown}}</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>{{CompatUnknown}}</td>
   <td>{{CompatGeckoDesktop("1.9.2")}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>3.1 (525)</td>
  </tr>
  <tr>
   <td><code>match-parent</code>{{experimental_inline}}</td>
   <td>16</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatGeckoDesktop("40")}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
  </tr>
 </tbody>
</table>

<table>
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Android</th>
   <th>Chrome for Android</th>
   <th>Edge</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>{{CompatVersionUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
  <tr>
   <td>Block alignment values {{non-standard_inline}}</td>
   <td>{{CompatUnknown}}</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>
   <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>
   <td>{{CompatUnknown}}</td>
  </tr>
  <tr>
   <td><code>match-parent</code>{{experimental_inline}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatGeckoMobile("40")}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
  <tr>
   <td><code>true</code>(non-standard syntax){{non-standard_inline}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatNo}}</td>
  </tr>
 </tbody>
</table>

<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="参见" style="margin-bottom: 20px; line-height: 30px;">参见</h2>

<ul>
 <li>{{Cssxref("margin","margin:auto")}}, {{Cssxref("margin-left","margin-left:auto")}}, {{Cssxref("vertical-align")}}</li>
</ul>