CSSテキストの配置
テキストの配置
このtext-align
プロパティは、テキストの水平方向の配置を設定するために使用されます。
テキストは、左揃えまたは右揃え、中央揃え、または両端揃えにすることができます。
次の例は、中央揃え、および左右揃えのテキストを示しています(テキストの方向が左から右の場合は左揃えがデフォルトであり、テキストの方向が右から左の場合は右揃えがデフォルトです)。
例
h1 {
text-align: center;
}
h2 {
text-align: left;
}
h3 {
text-align: right;
}
プロパティが「正当化」に設定されている場合、text-align
各行が同じ幅になるように各行が引き伸ばされ、左右の余白がまっすぐになります(雑誌や新聞のように)。
例
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;
}