text-align

语法:

text-alignstart | end | left | right | center | justify | match-parent | justify-all

默认值start

适用于:块容器

继承性:有

动画性:否

计算值:指定值,除 match-parent 值外

媒 体:视觉

取值:

left:
内容左对齐。
center:
内容居中对齐。
right:
内容右对齐。
justify:
内容两端对齐,但对于强制打断的行(被打断的这一行)及最后一行(包括仅有一行文本的情况,因为它既是第一行也是最后一行)不做处理。(CSS3)
start:
内容对齐开始边界。(CSS3)
end:
内容对齐结束边界。(CSS3)
match-parent:
这个值和inherit表现一致,只是该值继承的startend关键字是针对父母的direction值并计算的,计算值可以是 left 和 right 。(CSS3)
justify-all:
效果等同于justify,不同的是最后一行也会两端对齐。(CSS3)

说明:

定义元素内容的水平对齐方式。
  • 块级元素的文本内容是一些堆叠的线框
  • 块内文本内容的最后一行(包括仅有一行文本的情况,这时它既是第一行也是最后一行),其两端对齐需使用text-align-last(当浏览器不支持text-alignjustify-all值时);
  • IE浏览器下,如果text-align-last要生效,必须先定义text-alignjustify
  • 依据上述的一些描述,我们可以来实现一个两端对齐的示例:

    单行文本两端对齐示例:

    <div class="demo"> <p>我是谁</p> <p>你又是谁</p> <p>世界末日2012</p> </div>
    如果要实现本例中单行两端对齐,可以这样做:
    1. 首先,所有主流浏览器都支持text-alignjustify属性值;
    2. 其次,在这个例子中每个 p 都只有一行(所以既是第一行也是最后一行),所以无法通过定义text-align: justify来实现两端对齐,因为text-align: justify不会处理块级内容文本的最后一行。
    3. 再次,好在有一个专门用来处理最后一行对齐的属性text-align-last,可以通过定义text-align-last: justify来实现单行文本两端对齐。遗憾的是,不少浏览器尚不支持该属性。
    4. 综上所述,我们无法简单的通过使用text-align或者text-align-last来实现单行文本两端对齐。那么可以换个思路,想办法让它们变成多行文本,使用伪元素派生一行新的占位内容是个不错的选择,此时再实现两端对齐,只需要text-align就行了。但是 IE7 及以下浏览器不支持伪元素,如果要支持的话,可以直接使用text-align-last。实现及效果如下:

    我是谁

    你又是谁

    世界末日2012

    .demo p { text-align: justify; text-align-last: justify; } .demo p::after { display: inline-block; width: 100%; height: 0; content: "\0020"; overflow: hidden; }
  • 对应的脚本特性为:textAlign

兼容性:

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
Values IE Firefox Chrome Safari Opera iOS Safari Android Browser Android Chrome
Basic Support 8.0+ 40.0+ 40.0+ 8.0+ 40.0+ 8.0+ 4.4+ 28.0+
start | end 8.0-11.0
12.0+
justify 6.0-11.0 #1 40.0+ 4.0-40.0 #1 8.0+ 40.0+ 8.0+ 4.4-40.0 #1 28.0-40.0 #1
12.0+ 41.0+ 41.0+ 41.0+
match-parent 8.0-16.0 40.0+ 40.0-64.0 8.0-11.0 40.0-50.0 8.0-11.3 4.4-62.0 28.0-64.0
justify-all 8.0-16.0 40.0-58.0 40.0-64.0 8.0-11.0 40.0-50.0 8.0-11.3 4.4-62.0 28.0-64.0
  1. 如果要使得两端对齐生效,需要在单词之间添加空白,如空格

示例: