您的位置:首页 > Web前端 > CSS

每天一个css text-align

2015-09-22 20:14 671 查看
Value: left | right | center | justify | inherit
初始值: 如果direction的值为ltr,则text-align的初始值为left,如果direction的值为rtl,则text-align的初始值为right
应用范围: 块级容器,如div等
是否继承:
Percentages: N/A
Media: visual
计算值 初始值或者特别指定的值
text-align用于规定块级元素内的文本的水平对齐方式,有left(靠左对齐),right(靠右对齐),center(居中对齐),justify(两端对齐 可能会改变文字之间的间距).    需要注意的是text-align属性是运用于块级容器中的,不要将其应用于如span等行内元素。并且该属性是被继承的,所以应用text-align属性的所有子元素也会继承到该属性。
 参考网址:http://www.w3.org/TR/CSS21/text.html#propdef-text-aligndirection
Value: ltr | rtl | inherit
Initial: ltr
Applies to: all elements, but see prose
Inherited: yes
Percentages: N/A
Media: visual
Computed value: as specified
英文原版'text-align'
Value: left | right | center | justify | inherit
Initial: a nameless value that acts as 'left' if 'direction' is 'ltr', 'right' if 'direction' is 'rtl'
Applies to: block containers
Inherited: yes
Percentages: N/A
Media: visual
Computed value: the initial value or as specified
This property describes how inline-level content of a block container is aligned. Values have the following meanings:

left, right, center, justifyLeft, right, center, and justify text, respectively, as described in the section on inline formatting.
A block of text is a stack of line boxes. In the case of 'left', 'right' and 'center', this property specifies how the inline-level boxes within each line box align with respect to the line box's left and right sides; alignment is not with respect to the viewport. In the case of 'justify', this property specifies that the inline-level boxes are to be made flush with both sides of the line box if possible, by expanding or contracting the contents of inline boxes, else aligned as for the initial value. (See also 'letter-spacing' and 'word-spacing'.)

If an element has a computed value for 'white-space' of 'pre' or 'pre-wrap', then neither the glyphs of that element's text content nor its white space may be altered for the purpose of justification.

Note: CSS may add a way to justify text with 'white-space: pre-wrap' in the future.

In this example, note that since 'text-align' is inherited, all block-level elements inside DIV elements with a class name of 'important' will have their inline content centered.

div.important { text-align: center }


Note. The actual justification algorithm used depends on the user-agent and the language/script of the text.

Conforming user agents may interpret the value 'justify' as 'left' or 'right', depending on whether the element's default writing direction is left-to-right or right-to-left, respectively.
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: