CSS text-align_编程学问网

语法：

默认值：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）

说明：

定义元素内容的水平对齐方式。

块级元素的文本内容是一些堆叠的线框
块内文本内容的最后一行（包括仅有一行文本的情况，这时它既是第一行也是最后一行），其两端对齐需使用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
start \| end	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
justify	12.0+	40.0+	41.0+	8.0+	40.0+	8.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

如果要使得两端对齐生效，需要在单词之间添加空白，如空格

语法：

取值：

说明：

兼容性：

示例：