文本对齐 | 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;

Initial value	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.
Applies to	block containers
Inherited	yes
Media	visual
Computed value	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
Canonical order	order of appearance in the formal grammar of the values

语法

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

规范

Specification	Status	Comment
CSS Logical Properties Level 1The definition of 'text-align' in that specification.	Editor's Draft	No changes
CSS Text Module Level 3The definition of 'text-align' in that specification.	Working Draft	Added the start, end, and match-parent values. Changed the unnamed initial value to start (which it was).
CSS Level 2 (Revision 1)The definition of 'text-align' in that specification.	Recommendation	No changes
CSS Level 1The definition of 'text-align' in that specification.	Recommendation	Initial definition

浏览器兼容性

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)-moz1	No support	No support	1.0 (85)-khtml 1.3 (312)-webkit 1
start	1.0	?	1.0 (1.7 or earlier)	No support	(Yes)	3.1 (525)
end	1.0	?	3.6 (1.9.2)	No support	(Yes)	3.1 (525)
match-parent	16	?	40 (40)	No support	No support	No support

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)	No support	No support	?	?	No support	No support	No support

本文档系腾讯云开发者社区成员共同维护，如有问题请联系 cloudcommunity@tencent.com

最后更新于：2017-12-18