文本对齐 | text-align

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相同。

形式语法

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