# CSS text-align 屬性
## 實例
設置 h1、h2、h3 元素的文本對齊方式:
```
h1 {text-align:center}
h2 {text-align:left}
h3 {text-align:right}
```
## 瀏覽器支持
| IE | Firefox | Chrome | Safari | Opera |
| --- | --- | --- | --- | --- |
所有瀏覽器都支持 text-align 屬性。
注釋:任何的版本的 Internet Explorer (包括 IE8)都不支持屬性值 "inherit"。
## 定義和用法
text-align 屬性規定元素中的文本的水平對齊方式。
該屬性通過指定行框與哪個點對齊,從而設置塊級元素內文本的水平對齊方式。通過允許用戶代理調整行內容中字母和字之間的間隔,可以支持值 justify;不同用戶代理可能會得到不同的結果。
| 默認值: | 如果 direction 屬性是 ltr,則默認值是 left;如果 direction 是 rtl,則為 right。 |
| --- | --- |
| 繼承性: | yes |
| --- | --- |
| 版本: | CSS1 |
| --- | --- |
| JavaScript 語法: | _object_.style.textAlign="right" |
| --- | --- |
## 可能的值
| 值 | 描述 |
| --- | --- |
| left | 把文本排列到左邊。默認值:由瀏覽器決定。 |
| right | 把文本排列到右邊。 |
| center | 把文本排列到中間。 |
| justify | 實現兩端對齊文本效果。 |
| inherit | 規定應該從父元素繼承 text-align 屬性的值。 |
### 值 justify
最后一個水平對齊屬性是 justify,它會帶來自己的一些問題。
值 justify 可以使文本的兩端都對齊。在兩端對齊文本中,文本行的左右兩端都放在父元素的內邊界上。然后,調整單詞和字母間的間隔,使各行的長度恰好相等。您也許已經注意到了,兩端對齊文本在打印領域很常見。不過在 CSS 中,還需要多做些考慮。
要由用戶代理(而不是 CSS)來確定兩端對齊文本如何拉伸,以填滿父元素左右邊界之間的空間。例如,有些瀏覽器可能只在單詞之間增加額外的空間,而另外一些瀏覽器可能會平均分布字母間的額外空間(不過 CSS 規范特別指出,如果 [letter-spacing 屬性](pr_text_letter-spacing.asp "CSS letter-spacing 屬性")指定為一個長度值,“用戶代理不能進一步增加或減少字符間的空間”)。還有一些用戶代理可能會減少某些行的空間,使文本擠得更緊密。所有這些做法都會影響元素的外觀,甚至改變其高度,這取決于用戶代理的對齊選擇影響了多少文本行。
CSS 也沒有指定應當如何處理連字符(注1)。大多數兩端對齊文本都使用連字符將長單詞分開放在兩行上,從而縮小單詞之間的間隔,改善文本行的外觀。不過,由于 CSS 沒有定義連字符行為,用戶代理不太可能自動加連字符。因此,在 CSS 中,兩端對齊文本看上去沒有打印出來好看,特別是元素可能太窄,以至于每行只能放下幾個單詞。當然,使用窄設計元素是可以的,不過要當心相應的缺點。
注1:CSS 中沒有說明如何處理連字符,因為不同的語言有不同的連字符規則。規范沒有嘗試去調和這樣一些很可能不完備的規則,而是干脆不提這個問題。
## TIY 實例
[對齊文本](/tiy/t.asp?f=csse_text-align)
本例演示如何對齊文本。
```
<html>
<head>
<style type="text/css">
h1 {text-align: center}
h2 {text-align: left}
h3 {text-align: right}
</style>
</head>
<body>
<h1>這是標題 1</h1>
<h2>這是標題 2</h2>
<h3>這是標題 3</h3>
</body>
</html>
```
## 相關頁面
CSS 教程:[CSS 文本](/css/css_text.asp "CSS 文本")
HTML DOM 參考手冊:[textAlign 屬性](/jsref/prop_style_textalign.asp "HTML DOM textAlign 屬性")
- CSS3 動畫屬性(Animation)
- CSS3 @keyframes 規則
- CSS3 animation 屬性
- CSS3 animation-name 屬性
- CSS3 animation-duration 屬性
- CSS3 animation-timing-function 屬性
- CSS3 animation-delay 屬性
- CSS3 animation-iteration-count 屬性
- CSS3 animation-direction 屬性
- CSS3 animation-play-state 屬性
- CSS3 animation-fill-mode 屬性
- CSS 背景屬性(Background)
- CSS background 屬性
- CSS background-attachment 屬性
- CSS background-color 屬性
- CSS background-image 屬性
- CSS background-position 屬性
- CSS background-repeat 屬性
- CSS3 background-clip 屬性
- CSS3 background-origin 屬性
- CSS3 background-size 屬性
- CSS 邊框屬性(Border 和 Outline)
- CSS border 屬性
- CSS border-bottom 屬性
- CSS border-bottom-color 屬性
- CSS border-bottom-style 屬性
- CSS border-bottom-width 屬性
- CSS border-color 屬性
- CSS border-left 屬性
- CSS border-left-color 屬性
- CSS border-left-style 屬性
- CSS border-left-width 屬性
- CSS border-right 屬性
- CSS border-right-color 屬性
- CSS border-right-style 屬性
- CSS border-right-width 屬性
- CSS border-style 屬性
- CSS border-top 屬性
- CSS border-top-color 屬性
- CSS border-top-style 屬性
- CSS border-top-width 屬性
- CSS border-width 屬性
- CSS outline 屬性
- CSS outline-color 屬性
- CSS outline-style 屬性
- CSS outline-width 屬性
- CSS3 border-bottom-left-radius 屬性
- CSS3 border-bottom-right-radius 屬性
- CSS3 border-image 屬性
- CSS3 border-image-outset 屬性
- CSS3 border-image-repeat 屬性
- CSS3 border-image-slice 屬性
- CSS3 border-image-source 屬性
- CSS3 border-image-width 屬性
- CSS3 border-radius 屬性
- CSS3 border-top-left-radius 屬性
- CSS3 border-top-right-radius 屬性
- CSS3 box-shadow 屬性
- Box 屬性
- CSS3 overflow-x 屬性
- CSS3 overflow-y 屬性
- CSS3 overflow-style 屬性
- CSS3 rotation 屬性
- CSS3 rotation-point 屬性
- Color 屬性
- CSS3 opacity 屬性
- Content for Paged Media 屬性
- CSS 尺寸屬性(Dimension)
- CSS height 屬性
- CSS max-height 屬性
- CSS max-width 屬性
- CSS min-height 屬性
- CSS min-width 屬性
- CSS width 屬性
- 可伸縮框屬性(Flexible Box)
- CSS3 box-align 屬性
- CSS3 box-direction 屬性
- CSS3 box-flex 屬性
- CSS3 box-flex-group 屬性
- CSS3 box-lines 屬性
- CSS3 box-ordinal-group 屬性
- CSS3 box-orient 屬性
- CSS3 box-pack 屬性
- CSS 字體屬性(Font)
- CSS font 屬性
- CSS font-family 屬性
- CSS font-size 屬性
- CSS font-size-adjust 屬性
- CSS font-stretch 屬性
- CSS font-style 屬性
- CSS font-variant 屬性
- CSS font-weight 屬性
- 內容生成(Generated Content)
- CSS content 屬性
- CSS counter-increment 屬性
- CSS counter-reset 屬性
- CSS quotes 屬性
- Grid 屬性
- CSS3 grid-columns 屬性
- CSS3 grid-rows 屬性
- Hyperlink 屬性
- CSS3 target 屬性
- CSS3 target-name 屬性
- CSS3 target-new 屬性
- CSS3 target-position 屬性
- CSS 列表屬性(List)
- CSS list-style 屬性
- CSS list-style-image 屬性
- CSS list-style-position 屬性
- CSS list-style-type 屬性
- CSS 外邊距屬性(Margin)
- CSS margin 屬性
- CSS margin-bottom 屬性
- CSS margin-left 屬性
- CSS margin-right 屬性
- CSS margin-top 屬性
- Marquee 屬性
- 多列屬性(Multi-column)
- CSS3 column-count 屬性
- CSS3 column-fill 屬性
- CSS3 column-gap 屬性
- CSS3 column-rule 屬性
- CSS3 column-rule-color 屬性
- CSS3 column-rule-style 屬性
- CSS3 column-rule-width 屬性
- CSS3 column-span 屬性
- CSS3 column-width 屬性
- CSS3 columns 屬性
- CSS 內邊距屬性(Padding)
- CSS padding 屬性
- CSS padding-bottom 屬性
- CSS padding-left 屬性
- CSS padding-right 屬性
- CSS padding-top 屬性
- Paged Media 屬性
- CSS 定位屬性(Positioning)
- CSS bottom 屬性
- CSS clear 屬性
- CSS clip 屬性
- CSS cursor 屬性
- CSS display 屬性
- CSS float 屬性
- CSS left 屬性
- CSS overflow 屬性
- CSS position 屬性
- CSS right 屬性
- CSS top 屬性
- CSS vertical-align 屬性
- CSS visibility 屬性
- CSS z-index 屬性
- CSS 打印屬性(Print)
- CSS page-break-after 屬性
- CSS page-break-before 屬性
- CSS page-break-inside 屬性
- CSS 表格屬性(Table)
- CSS border-collapse 屬性
- CSS border-spacing 屬性
- CSS caption-side 屬性
- CSS empty-cells 屬性
- CSS table-layout 屬性
- CSS 文本屬性(Text)
- CSS color 屬性
- CSS direction 屬性
- CSS letter-spacing 屬性
- CSS line-height 屬性
- CSS text-align 屬性
- CSS text-decoration 屬性
- CSS text-indent 屬性
- CSS text-transform 屬性
- CSS unicode-bidi 屬性
- CSS white-space 屬性
- CSS word-spacing 屬性
- CSS3 hanging-punctuation 屬性
- CSS3 punctuation-trim 屬性
- CSS3 text-emphasis 屬性
- CSS3 text-justify 屬性
- CSS3 text-outline 屬性
- CSS3 text-overflow 屬性
- CSS3 text-shadow 屬性
- CSS3 text-wrap 屬性
- CSS3 word-break 屬性
- CSS3 word-wrap 屬性
- 2D/3D 轉換屬性(Transform)
- CSS3 transform 屬性
- CSS3 transform-origin 屬性
- CSS3 transform-style 屬性
- CSS3 perspective 屬性
- CSS3 perspective-origin 屬性
- CSS3 backface-visibility 屬性
- 過渡屬性(Transition)
- CSS3 transition 屬性
- CSS3 transition-property 屬性
- CSS3 transition-duration 屬性
- CSS3 transition-timing-function 屬性
- CSS3 transition-delay 屬性
- 用戶界面屬性(User-interface)
- CSS3 appearance 屬性
- CSS3 box-sizing 屬性
- CSS3 icon 屬性
- CSS3 nav-down 屬性
- CSS3 nav-index 屬性
- CSS3 nav-left 屬性
- CSS3 nav-right 屬性
- CSS3 nav-up 屬性
- CSS3 outline-offset 屬性
- CSS3 resize 屬性
- CSS 選擇器參考手冊
- CSS 聽覺參考手冊
- CSS 網絡安全字體組合
- CSS 單位
- CSS 顏色
- CSS 合法顏色值
- CSS 顏色名
- CSS 顏色十六進制值
- 免責聲明