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;
初始值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
计算值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 typediscrete

语法

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

值

start

如果内容方向是左至右，则等于left，反之则为right。

end

如果内容方向是左至右，则等于right，反之则为left。

left

行内内容向左侧边对齐。

行内内容向右侧边对齐。

center

行内内容居中。

<string>

第一个出现的该（单字符）字符串被用来对齐。跟随的关键字定义对齐的方向。例如，可用于让数字值根据小数点对齐。

justify

文字向两侧对齐，对最后一行无效。

justify-all

和 justify 一致，但是强制使最后一行两端对齐。

match-parent

和inherit类似，区别在于start和end的值根据父元素的direction确定，并被替换为恰当的left或right。

形式语法

text-align = 
  start         |
  end           |
  left          |
  right         |
  center        |
  justify       |
  match-parent  |
  justify-all

示例

开始处对齐

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: start;
  border: solid;
}

结果

文本居中

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

结果

使用“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;
}

结果

规范

Specification
CSS Logical Properties and Values Level 1
# text-align
CSS Text Module Level 3
# text-align-property

浏览器兼容性

BCD tables only load in the browser

参见