CSS text-align 属性
- 上一页 table-layout
- 下一页 text-align-last
Definition at Usage
Ang text-align attribute ay nagtatakda ng horizontal alignment ng teksto sa elemento.
Ang attribute na ito ay nagtatakda kung saan ang pangkat ng linya ay nakikipag-ayon sa kung anong punto, at nagtatakda ng paraan ng horizontal alignment ng teksto sa bloke na elemento. Sa pamamagitan ng pagbibigay ng kapangyarihan sa user agent na ayusin ang paghahati ng letre at ang paghahati ng salita sa linya ng teksto, ang halaga ng justify ay maaring suportahan; ang iba't ibang user agent ay maaring makakakuha ng iba't ibang resulta.
Bilang karagdagan, manggagamit ang:
CSS Tutorial:CSS 文本
HTML DOM Reference Manual:textAlign Atribute
Halimbawa
Itatago ang paraan ng pag-aaliwang horizontal ng teksto ng elemento ng h1, h2, at h3:
h1 {text-align:center;} h2 {text-align:left;} h3 {text-align:right;}
CSS Grammar
text-align: left|right|center|justify|initial|inherit;
Halagang attribute
Halaga | Paglalarawan |
---|---|
left | Ilapit ang teksto sa kanan. Ang default na halaga: pinapasyahan ng browser. |
right | 把文本排列到右边。 |
center | 把文本排列到中间。 |
justify | 实现两端对齐文本效果。 |
inherit | 规定应该从父元素继承 text-align 属性的值。 |
值 justify
最后一个水平对齐属性是 justify,它会带来自己的一些问题。
值 justify 可以使文本的两端都对齐。在两端对齐文本中,文本行的左右两端都放在父元素的内边界上。然后,调整单词和字母间的间隔,使各行的长度恰好相等。您也许已经注意到了,两端对齐文本在打印领域很常见。不过在 CSS 中,还需要多做些考虑。
要由用户代理(而不是 CSS)来确定两端对齐文本如何拉伸,以填满父元素左右边界之间的空间。例如,有些浏览器可能只在单词之间增加额外的空间,而另外一些浏览器可能会平均分布字母间的额外空间(不过 CSS 规范特别指出,如果 letter-spacing 属性指定为一个长度值,“用户代理不能进一步增加或减少字符间的空间”)。还有一些用户代理可能会减少某些行的空间,使文本挤得更紧密。所有这些做法都会影响元素的外观,甚至改变其高度,这取决于用户代理的对齐选择影响了多少文本行。
CSS 也没有指定应当如何处理连字符(注1)。大多数两端对齐文本都使用连字符将长单词分开放在两行上,从而缩小单词之间的间隔,改善文本行的外观。不过,由于 CSS 没有定义连字符行为,用户代理不太可能自动加连字符。因此,在 CSS 中,两端对齐文本看上去没有打印出来好看,特别是元素可能太窄,以至于每行只能放下几个单词。当然,使用窄设计元素是可以的,不过要当心相应的缺点。
注1:CSS 中没有说明如何处理连字符,因为不同的语言有不同的连字符规则。规范没有尝试去调和这样一些很可能不完备的规则,而是干脆不提这个问题。
技术细节
默认值: | 如果 direction 属性是 ltr,则默认值是 left;如果 direction 是 rtl,则为 right。 |
---|---|
继承性: | yes |
版本: | CSS1 |
JavaScript 语法: | object.style.textAlign="right" |
更多实例
- 对齐文本
- 本例演示如何对齐文本。
浏览器支持
表格中的数字注明了完全支持该属性的首个浏览器版本。
Chrome | IE / Edge | Firefox | Safari | Opera |
---|---|---|---|---|
1.0 | 3.0 | 1.0 | 1.0 | 3.5 |
- 上一页 table-layout
- 下一页 text-align-last