text-align

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;

<div class="grid">
  <div class="col">
    <div class="row">
      <div class="cell">
        left
        <p class="taLeft">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam pellen tesque vehicu la con vallis.</p>
      </div>
      <div class="cell">
        start (ltr)
        <p class="taStart ltr">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam pellen tesque vehicu la con vallis.</p>
      </div>
      <div class="cell">
        start (rtl)
        <p class="taStart rtl">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam pellen tesque vehicu la con vallis.</p>
      </div>
    </div>
    <div class="row">
      <div class="cell">
        right
        <p class="taRight">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam pellen tesque vehicu la con vallis.</p>
      </div>
      <div class="cell">
        end (ltr)
        <p class="taEnd ltr">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam pellen tesque vehicu la con vallis.</p>
      </div>
      <div class="cell">
        end (rtl)
        <p class="taEnd rtl">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam pellen tesque vehicu la con vallis.</p>
      </div>
    </div>
    <div class="row">
      <div class="cell">
        center
        <p class="taCenter">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam pellen tesque vehicu la con vallis.</p>
      </div>
      <div class="cell">
        justify
        <p class="taJustify">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam pellen tesque vehicu la con vallis.</p>
      </div>
      <div class="cell">
        justify-all
        <p class="taJustifyAll">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam pellen tesque vehicu la con vallis.</p>
      </div>
    </div>
  </div>
</div>

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; }

初始值	`start`, or a nameless value that acts as `left` if `direction` is `ltr`, `right` if `direction` is `rtl` if `start` is not supported by the browser.
适用元素	block containers
是否是继承属性	yes
适用媒体	visual
计算值	as specified, except for the `match-parent` value which is calculated against its parent's `direction` value and results in a computed value of either `left` or `right`
Animation type	discrete
正规顺序	order of appearance in the formal grammar of the values

语法

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

Values

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

指示语法

start | end | left | right | center | justify | match-parent

示例

查看在线演示

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

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

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

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.:

.something {
  margin: auto;
}

.something {
  margin: 0 auto;
}

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

规范

规范	状态	备注
CSS Text Module Level 3 visibility	Working Draft	添加了`start`和`end关键字` keyword. Changed the unnamed initial value to `start` (which it was). Added the `<string>` value, the `match-parent` value and the `start end` double value.
CSS Level 2 (Revision 1) text-align	Recommendation	无改变
CSS Level 1 text-align	Recommendation	首次定义

Feature	Chrome	Edge	Firefox (Gecko)	Internet Explorer	Opera	Safari
Basic support (`left`, `right`, `center` and `justify`)	1.0	(Yes)	1.0 (1.7 or earlier)	3.0	3.5	1.0 (85)
Block alignment values	1.0-webkit	?	1.0 (1.7 or earlier)-moz^[1]	未实现	未实现	1.0 (85)-khtml 1.3 (312)-webkit [1]
`start`	1.0	?	1.0 (1.7 or earlier)	未实现	(Yes)	3.1 (525)
`end`	1.0	?	3.6 (1.9.2)	未实现	(Yes)	3.1 (525)
`match-parent`	16	?	40 (40)	未实现	未实现	未实现

Feature	Android	Chrome for Android	Edge	Firefox Mobile (Gecko)	IE Mobile	Opera Mobile	Safari Mobile
Basic support	?	?	(Yes)	?	?	?	?
Block alignment values	?	?	?	?	?	?	?
`start`	?	?	?	?	?	?	?
`end`	?	?	?	?	?	?	?
`match-parent`	?	?	?	40.0 (40)	?	?	?
`true`(non-standard syntax)	未实现	未实现	?	?	未实现

[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 align attributes on some table-related element. Do not use these on production Web sites.

参见

margin:auto, margin-left:auto, vertical-align

text-align

语法

Values

指示语法

示例

Live Examples

备注

示例

Left alignment

HTML

CSS

Result

Centered text

HTML

CSS

Result

Justify

HTML

CSS

Result

Notes

规范

浏览器兼容性

参见

文档标签和贡献者

学习 Web 开发的最佳实践

谢谢！请检查您的收件箱以确认您的订阅。