text-align

语法：

text-align：start | end | left | right | center | justify | match-parent | justify-all

默认值：start

适用于：块容器

继承性：有

动画性：否

计算值：指定值，除 match-parent 值外

媒　体：视觉

取值：

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

* CSS3新增属性可能存在描述错误及变更，仅供参考，持续更新

说明：

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

    单行文本两端对齐示例：

    <div class="demo"> <p>我是谁</p> <p>你又是谁</p> <p>世界末日2012</p> </div>
    如果要实现本例中单行两端对齐，可以这样做：
    1. 首先，所有主流浏览器都支持text-align的justify属性值；
    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. 如果要使得两端对齐生效，需要在单词之间添加空白，如空格

示例：