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プロパティは、テキストの最後の行を揃える方法を指定します。

例

テキストの最後の行を3つの<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; }