Join MDN and developers like you at Mozilla's View Source conference, 12-14 September in Berlin, Germany. Learn more at https://viewsourceconf.org

概述

text-align CSS属性定义行内内容(例如文字)如何相对它的块父元素对齐。text-align 并不控制块元素自己的对齐,只控制它的行内内容的对齐。

初始值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
是否适用于 CSS 动画
正规顺序order of appearance in the formal grammar of the values

语法

text-align: left;
text-align: right;
text-align: center;
text-align: justify;
text-align: start;
text-align: end;
text-align: match-parent;
text-align: start end;
text-align: ".";
text-align: start ".";
text-align: "." end;

text-align: inherit;
 
 
 
 
 
 
 
 
 
 
 
 
 

Values

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

指示语法

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;

规范

规范 状态 备注
CSS Text Level 3
visibility
Working Draft 添加了startend关键字 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 Firefox (Gecko) Internet Explorer Opera Safari
Basic support (leftrightcenter and justify) 1.0 1.0 (1.7 or earlier) 3.0 3.5 1.0 (85)
Block alignment values [1] 1.0-webkit 1.0 (1.7 or earlier)-moz 未实现 未实现 1.0 (85)-khtml
1.3 (312)-webkit
start  1.0 1.0 (1.7 or earlier) 未实现 (Yes) 3.1 (525)
end  1.0 3.6 (1.9.2) 未实现 未实现 3.1 (525)
match-parent 16 未实现 未实现 未实现 未实现

<string> value

未实现 未实现 未实现 未实现 未实现
Feature Android Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support ? ? ? ? ? ?
Block alignment values [1] ? ? ? ? ? ?
start  ? ? ? ? ? ?
end  ? ? ? ? ? ?
match-parent ? ? ? ? ? ?

<string> value

? ? ? ? ? ?

[1] Both WebKit and Gecko supports a prefixed version of leftcenter, 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.

参见

文档标签和贡献者

 此页面的贡献者: Guillaume-Heras, Sebastianz, fscholz, FredWe, fskuok, ziyunfei
 最后编辑者: Guillaume-Heras,