CSS text-align 属性指定块级元素中的内联元素(如文字和图片)的对齐方式。
CSS text-align
属性并不控制块级元素的对齐方式,它控制块级元素里面的内联元素的对齐方式。虽然这个属性的名称为text-align
,但是块级元素中的所有内联元素都会被这个属性影响。
该属性的对齐方式是相对于元素本身而言的,不是相对于整个浏览器视口而言。
text-align
属性会级联,在父元素上使用text-align
属性,其下的所有块级子元素也会拥有相同的内联元素对齐方式。
官方语法
text-align: start | end | left | right | center | justify | match-parent | start end | <string>
参数:
- start:根据文字的方向(
direction
)来决定对齐方式,如果文字方向是从左向右,效果和left
相同,内联元素左对齐。如果文字方向是从右向左,效果和right
相同,内联元素右对齐。 - end:与
start
正好相反。如果文字方向是从左向右,效果和right
相同,内联元素右对齐。如果文字方向是从右向左,效果和left
相同,内联元素左对齐。 - left:内联元素在行内容器中左对齐。
- right:内联元素在行内容器中右对齐。
- center:内联元素在行内容器中居中对齐。
- justify:文字根据
text-justify
属性指定的方法来进行调整。浏览器会调整单词之间的间隙,使内联元素可以填充整个行内容器。通俗来说就是调整单词的间隙,使文字向两侧对齐,左右两侧距离容器的空白保持基本相同。 - match-parent:和
inherit
类似,区别在于start
和end
的值根据父元素的direction
确定,并被替换为恰当的left或right。 - start end:实验性的属性值,目前没有浏览器支持。
- <string>:实验性的属性值,目前没有浏览器支持。第一个出现的该(单字符)字符串被用来对齐。跟随的关键字定义对齐的方向。例如,可用于让数字值根据小数点对齐。
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
取值。