CSS 文本對齊

文本對齊

text-align 屬性用于設置文本的水平對齊方式。

文本可以左對齊或右對齊，或居中對齊。

下例展示了居中對齊以及左右對齊的文本（如果文本方向是從左到右，則默認為左對齊；如果文本方向是從右到左，則默認是右對齊）：

實例

h1 {
  text-align: center;
}
h2 {
  text-align: left;
}
h3 {
  text-align: right;
}

親自試一試

當 text-align 屬性設置為 "justify" 后，將拉伸每一行，以使每一行具有相等的寬度，并且左右邊距是直的（就像在雜志和報紙中）：

實例

div {
  text-align: justify;
}

親自試一試

文本方向

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

實例

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

親自試一試

垂直對齊

vertical-align 屬性設置元素的垂直對齊方式。

本例演示如何設置文本中圖像的垂直對齊方式：

實例

img.top {
  vertical-align: top;
}
img.middle {
  vertical-align: middle;
}
img.bottom {
  vertical-align: bottom;
}

親自試一試