text-align
CSS
property sets the horizontal alignment of a block element or table-cell box. This means it works like
vertical-align
but in the horizontal direction.
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
/* Keyword values */ text-align: left; text-align: right; text-align: center; text-align: justify; text-align: justify-all; text-align: start; text-align: end; text-align: match-parent; /* Character-based alignment in a table column */ text-align: "."; text-align: "." center; /* Block alignment values (Non-standard syntax) */ text-align: -moz-center; text-align: -webkit-center; /* Global values */ text-align: inherit; text-align: initial; text-align: unset;
text-align
property is specified in one of the following ways:
start
,
end
,
left
,
right
,
center
,
justify
,
justify-all
，或
match-parent
.
<string>
value only, in which case the other value defaults to
right
.
<string>
值。
start
left
if direction is left-to-right and
right
if direction is right-to-left.
end
right
if direction is left-to-right and
left
if direction is right-to-left.
left
The inline contents are aligned to the left edge of the line box.
right
The inline contents are aligned to the right edge of the line box.
center
The inline contents are centered within the line box.
justify
The inline contents are justified. Text should be spaced to line up its left and right edges to the left and right edges of the line box, except for the last line.
justify-all
justify
, but also forces the last line to be justified.
match-parent
inherit
, but the values
start
and
end
are calculated according to the parent's
direction
and are replaced by the appropriate
left
or
right
值。
<string>
When applied to a table cell, specifies the alignment character around which the cell's contents will align.
The inconsistent spacing between words created by justified text can be problematic for people with cognitive concerns such as Dyslexia.
| 初始值 |
start
, or a nameless value that acts as
left
if
direction
is
ltr
,
right
if
direction
is
rtl
if
start
is not supported by the browser.
|
|---|---|
| 适用于 | block containers |
| 继承 | yes |
| 计算值 |
as specified, except for the
match-parent
value which is calculated against its parent's
direction
value and results in a computed value of either
left
or
right
|
| 动画类型 | discrete |
start | end | left | right | center | justify | match-parent
<p class="example"> Integer elementum massa at nulla placerat varius. Suspendisse in libero risus, in interdum massa. Vestibulum ac leo vitae metus faucibus gravida ac in neque. Nullam est eros, suscipit sed dictum quis, accumsan a ligula. </p>
.example {
text-align: left;
border: solid;
}
<p class="example"> Integer elementum massa at nulla placerat varius. Suspendisse in libero risus, in interdum massa. Vestibulum ac leo vitae metus faucibus gravida ac in neque. Nullam est eros, suscipit sed dictum quis, accumsan a ligula. </p>
.example {
text-align: center;
border: solid;
}
<p class="example"> Integer elementum massa at nulla placerat varius. Suspendisse in libero risus, in interdum massa. Vestibulum ac leo vitae metus faucibus gravida ac in neque. Nullam est eros, suscipit sed dictum quis, accumsan a ligula. </p>
.example {
text-align: justify;
border: solid;
}
The standard-compatible way to center a block itself without centering its inline content is setting the left and right
margin
to
auto
, e.g.:
.something {
margin: auto;
}
.something {
margin: 0 auto;
}
.something {
margin-left: auto;
margin-right: auto;
}
| 规范 | 状态 | 注释 |
|---|---|---|
|
CSS Logical Properties and Values Level 1
The definition of 'text-align' in that specification. |
编者草案 | No changes |
|
CSS Text Module Level 4
The definition of 'text-align' in that specification. |
编者草案 |
添加
<string>
值。
|
|
CSS Text Module Level 3
The definition of 'text-align' in that specification. |
工作草案 |
添加
start
,
end
，和
match-parent
values. Changed the unnamed initial value to
start
(which it was).
|
|
CSS Level 2 (Revision 1)
The definition of 'text-align' in that specification. |
推荐 | No changes |
|
CSS Level 1
The definition of 'text-align' in that specification. |
推荐 | 初始定义 |
| Desktop | Mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
text-align
|
Chrome 完整支持 1 | Edge 完整支持 12 | Firefox 完整支持 1 | IE 完整支持 3 | Opera 完整支持 3.5 | Safari 完整支持 1 | WebView Android 完整支持 ≤37 | Chrome Android 完整支持 18 | Firefox Android 完整支持 4 | Opera Android 完整支持 10.1 | Safari iOS 完整支持 1 | Samsung Internet Android 完整支持 1.0 |
Prefixed
center
,
left
，和
right
values for block alignment
弃用
非标
|
Chrome
完整支持
1
Prefixed
|
Edge
完整支持
79
Prefixed
|
Firefox
完整支持
1
Prefixed
|
IE 不支持 No |
Opera
完整支持
15
Prefixed
|
Safari
完整支持
1.3
Prefixed
|
WebView Android
完整支持
37
Prefixed
|
Chrome Android
完整支持
18
Prefixed
|
Firefox Android
完整支持
4
Prefixed
|
Opera Android
完整支持
14
Prefixed
|
Safari iOS
完整支持
1
Prefixed
|
Samsung Internet Android
完整支持
1.0
Prefixed
|
Flow-relative values
start
and
end
|
Chrome 完整支持 1 | Edge 完整支持 79 | Firefox 完整支持 1 | IE 不支持 No | Opera 完整支持 15 | Safari 完整支持 3.1 | WebView Android 完整支持 37 | Chrome Android 完整支持 18 | Firefox Android 完整支持 4 | Opera Android 完整支持 14 | Safari iOS 完整支持 2 | Samsung Internet Android 完整支持 1.0 |
justify-all
|
Chrome 不支持 No | Edge 不支持 No | Firefox 不支持 No | IE 不支持 No | Opera 不支持 No | Safari 不支持 No | WebView Android 不支持 No | Chrome Android 不支持 No | Firefox Android 不支持 No | Opera Android 不支持 No | Safari iOS 不支持 No | Samsung Internet Android 不支持 No |
match-parent
|
Chrome 完整支持 16 | Edge 完整支持 79 | Firefox 完整支持 40 | IE 不支持 No | Opera 完整支持 15 | Safari 不支持 No | WebView Android 完整支持 37 | Chrome Android 完整支持 18 | Firefox Android 完整支持 40 | Opera Android 完整支持 14 | Safari iOS 不支持 No | Samsung Internet Android 完整支持 1.0 |
Character-based alignment in a table column (
<string>
value)
Experimental
|
Chrome 不支持 No | Edge 不支持 No | Firefox 不支持 No | IE 不支持 No | Opera 不支持 No | Safari 不支持 No | WebView Android 不支持 No | Chrome Android 不支持 No | Firefox Android 不支持 No | Opera Android 不支持 No | Safari iOS 不支持 No | Samsung Internet Android 不支持 No |
完整支持
不支持
实验。期望将来行为有所改变。
非标。预期跨浏览器支持较差。
弃用。不要用于新网站。
要求使用供应商前缀或不同名称。