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

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

/* 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;

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

{{cssinfo}}

语法

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

Values

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

指示语法

{{csssyntax("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...

备注

居中一个块元素且不居中它的行内内容的标准兼容的方法是将它的左、右margin设为auto, 例如：

margin:auto; 或margin:0 auto; 或margin-left:auto; margin-right:auto;

示例

Left alignment

HTML

<p class="example">
  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.
</p>

CSS

.example {
  text-align: left;
  border: solid;
}

Result

{{EmbedLiveSample("Left_alignment","100%","100%")}}

Centered text

HTML

<p class="example">
  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.
</p>

CSS

.example {
  text-align: center;
  border: solid;
}

Result

{{EmbedLiveSample("Centered_text","100%","100%")}}

Justify

HTML

<p class="example">
  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.
</p>

CSS

.example {
  text-align: justify;
  border: solid;
}

Result

{{EmbedLiveSample("Justify","100%","100%")}}

Notes

The standard-compatible way to center a block itself without centering its inline content is setting the left and right {{cssxref("margin")}} to auto, e.g.:

.something {
  margin: auto;
}
.something {
  margin: 0 auto;
}
.something {
  margin-left: auto;
  margin-right: auto;
}

规范

规范 状态 备注
{{SpecName('CSS3 Text', '#text-align', 'visibility')}} {{Spec2('CSS3 Text')}} 添加了start和end关键字 keyword. Changed the unnamed initial value to start (which it was). Added the {{cssxref("<string>")}} value, the match-parent value and the start end double value.
{{SpecName('CSS2.1', 'text.html#alignment-prop', 'text-align')}} {{Spec2('CSS2.1')}} 无改变
{{SpecName('CSS1', '#text-align', 'text-align')}} {{Spec2('CSS1')}} 首次定义

浏览器兼容性

{{Compat("css.properties.text-align")}}

参见