文本对齐 | text-align

该text-alignCSS属性描述内联内容（例如文本）应该怎样向其父元素块对齐。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;

语法

该text-align属性被指定为下面的列表中的任意一个关键字。

可能值

start——如果方向是从左到右，效果与left相同；如果方向是从右到左，效果与right相同。

end——如果方向是从左到右，效果与right相同；如果方向是从右到左，效果与left相同。

left——内联内容与行框的左边缘对齐。

right——内联内容与行框的右边缘对齐。

center——内联内容在线框中居中。

justify——内联内容是对齐的。除了最后一行之外，文本应该间隔排列，以便将其左右边缘排列在线框的左侧和右侧边缘。

justify-all——同justify，但同时强制最后一行是对齐的。

match-parent——类似inherit，但start和end的值根据父元素的direction计算并由适当left或right值取代。

形式语法

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

实例

左对齐

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

结果

文本居中

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

结果

对齐

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

结果

笔记

将一个块本身居中而不居中其内联内容的标准兼容方法是将左右两边的margin设为auto，例如：

.something {
  margin: auto;
}

.something {
  margin: 0 auto;
}

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

规范

浏览器兼容性