CSS 文本对齐

文本对齐和文本方向

在本章中，您将了解以下属性：

text-align
text-align-last
direction
unicode-bidi
vertical-align

文本对齐

这个text-align属性用于设置文本的水平对齐方式。

文本可以左对齐、右对齐、居中或两端对齐。

以下示例显示居中对齐和左对齐和右对齐的文本（如果文本方向为从左到右，则默认为左对齐；如果文本方向为从右到左，则默认为右对齐）：

示例

h1 {
text-align: center;
}

h2 {
text-align: left;
}

h3 {
text-align: right;
}

亲自试一试 »

当。。。的时候text-align属性设置为"justify"，每行都被拉伸，以便每行具有相等的宽度，并且左右边距是直的（就像杂志和报纸中一样）：

示例

div {
text-align: justify;
}

亲自试一试 »

文本最后对齐

这个text-align-last属性指定如何对齐文本的最后一行。

示例

将最后一行文本对齐三个 <p> 元素：

p.a {
text-align-last: right;
}

p.b {
text-align-last: center;
}

p.c {
text-align-last: justify;
}

亲自试一试 »

文字方向

这个direction和 unicode-bidi属性可用于更改元素的文本方向：

示例

p {
direction: rtl;
unicode-bidi: bidi-override;
}

亲自试一试 »

垂直对齐

这个vertical-align属性设置元素的垂直对齐方式。

示例

设置文本中图片的垂直对齐方式：

img.a {
vertical-align: baseline;
}

img.b {
vertical-align: text-top;
}

img.c {
vertical-align: text-bottom;
}

img.d {
vertical-align: sub;
}

img.e {
vertical-align: super;
}

亲自试一试 »

CSS 文本对齐/方向属性

Property	Description
direction	Specifies the text direction/writing direction
text-align	Specifies the horizontal alignment of text
text-align-last	Specifies how to align the last line of a text
unicode-bidi	Used together with the direction property to set or return whether the text should be overridden to support multiple languages in the same document
vertical-align	Sets the vertical alignment of an element