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;
}

自分で試してみる