Sponsored Link
プロパティ・値の解説
| プロパティ | 指定の効果 | 値 |
|---|---|---|
| text-align | 指定要素の子要素となる文字や画像の水平方向の配置の指定 | left・right・center・justifyなど |
CodePenで動作チェック
「text-align」の指定を行うことで実際にはどういった影響があるのかを、CodePenのウィンドウを使って動作チェックしてみましょう。
CodePenのウィンドウで以下の作業を行いましょう。
/* text-align: center; */
/* text-align: right; */
/* text-align: left; */
/* text-align: justify; */
↓「/*」「*/」を削除↓
text-align: center;
text-align: right;
text-align: left;
text-align: justify;
See the Pen プロパティ：text-align by 脇坂基徳 (@rvyolqet-the-vuer) on CodePen.
子要素の水平方向の配置の指定プロパティ
「text-align」は指定要素の子要素の水平方向の配置の指定のためのプロパティです。
「text-align」というプロパティ名なので「文字に対しての指定」と思いがちですが、文字だけではなく画像や内側に配置したdivタグなどのブロックに対しても有効です。
今回は値に「center」を指定することで、bodyタグの内側の要素を水平方向中央揃えに指定しています。