html5 text align,CSS属性参考 | text-align

CSS text-align 属性指定块级元素中的内联元素(如文字和图片)的对齐方式。

CSS text-align属性并不控制块级元素的对齐方式，它控制块级元素里面的内联元素的对齐方式。虽然这个属性的名称为text-align，但是块级元素中的所有内联元素都会被这个属性影响。

该属性的对齐方式是相对于元素本身而言的，不是相对于整个浏览器视口而言。

text-align属性会级联，在父元素上使用text-align属性，其下的所有块级子元素也会拥有相同的内联元素对齐方式。

官方语法

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

参数：

start：根据文字的方向(direction)来决定对齐方式，如果文字方向是从左向右，效果和left相同，内联元素左对齐。如果文字方向是从右向左，效果和right相同，内联元素右对齐。

end：与start正好相反。如果文字方向是从左向右，效果和right相同，内联元素右对齐。如果文字方向是从右向左，效果和left相同，内联元素左对齐。

left：内联元素在行内容器中左对齐。

right：内联元素在行内容器中右对齐。

center：内联元素在行内容器中居中对齐。

justify：文字根据text-justify属性指定的方法来进行调整。浏览器会调整单词之间的间隙，使内联元素可以填充整个行内容器。通俗来说就是调整单词的间隙，使文字向两侧对齐，左右两侧距离容器的空白保持基本相同。

match-parent：和inherit类似，区别在于start和end的值根据父元素的direction确定，并被替换为恰当的left或right。

start end：实验性的属性值，目前没有浏览器支持。

：实验性的属性值，目前没有浏览器支持。第一个出现的该(单字符)字符串被用来对齐。跟随的关键字定义对齐的方向。例如，可用于让数字值根据小数点对齐。

text-align属性的初始值根据文字方向direction来决定，如果是ltr则为left，如果是rtl则为right。

应用范围

text-align属性可以应用在所有块级元素上。

示例代码

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;

在线演示

下面的代码演示了文本居中对齐的效果。

这段文字居中对齐。

浏览器支持

所有的现代浏览器都支持text-align属性，包括Chrome, Firefox, Safari, Opera, IE3+, Android 和 iOS。IE 和 Opera不支持start和end取值。

相关阅读