CSS テキストの配置
テキストの配置とテキストの方向
この章では、次のプロパティについて学習します。
text-aligntext-align-lastdirectionunicode-bidivertical-align
テキストの配置
のtext-alignプロパティは、テキストの水平方向の配置を設定するために使用されます。
テキストは、左揃えまたは右揃え、中央揃え、または両端揃えにすることができます。
次の例は、中央揃え、および左右に揃えられたテキストを示しています (テキストの方向が左から右の場合は左揃えがデフォルトであり、テキストの方向が右から左の場合は右揃えがデフォルトです)。
とき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プロパティを使用して、要素のテキスト方向を変更できます。
垂直方向の配置
の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 テキストの配置/方向のプロパティ
|
財産 |
説明 |
|---|---|
| 方向 | 文字方向・書字方向を指定 |
| テキスト整列 | テキストの水平方向の配置を指定します |
| text-align-last | テキストの最終行を揃える方法を指定します |
| Unicode-bd | と一緒に使用方向同じドキュメントで複数の言語をサポートするためにテキストをオーバーライドする必要があるかどうかを設定または返すプロパティ |
| 垂直整列 | 要素の垂直方向の配置を設定します |
プログラミング学習を加速させる
プログラミングをプロの講師に教えてもらいませんか。