問題
11text-alignで文字を中央に寄せよう
CSSで文字を中央に寄せたい場合に使用するのが、text-alignプロパティ。 text-alignは、テキストを左寄せ、中央寄せ、右寄せに指定ができます。 Webページを作成していると文字を中央に寄せたい場面がたくさんあります。 瞬時に使用できるよう使い慣れていきましょう。
CSSの問題に挑戦しよう！
問題
「text-alignで文字を中央に寄せよう」
boxの中に入っているninjacodeの文字を中央に寄せてみましょう。
あらかじめエディタに書くコード
<div class="box">
<p>ninjacode</p>
</div>
¥HTML¥
.box {
width: 300px;
padding: 30px 0;
background-color: white;
border: 1px solid black;
}
¥CSS¥
期待する画面
解答と解説（text-alignで文字を中央に寄せよう）
解説
※ご登録後トークルーム下部にあるメニュー内
「無料問題集※解答付き」を押すと
解答閲覧用URLが届きます
テキストを中央に寄せるにはtext-alignプロパティを使って値にcenterを指定します。
左寄せならleft、右寄せならrightを指定しましょう。
text-alignは指定した要素とその子要素にも適用されます。
今回の問題であれば、box自体にtext-alignを指定しても中央寄せになりますが、boxの中に複数のp要素があれば全てが中央寄せされてしまいます。
状況に応じてセレクタを正しく指定しましょう。
補足
要素を中央に寄せるという点では、margin 0 autoと何が違うの?
と疑問を持つ方も多いのではなかと思います。
大きな違いは、margin 0 autoはブロック要素を中央寄せし、text-alignはインライン要素を中央寄せするという点です。
今後登場するjustify-contentなども中央寄せする際に使用するプロパティですが、明確な違いがあるので、ひとつひとつ覚えていきましょう。
ポイント
text-alignとは
text-alignプロパティとは、HTML要素内のテキストの水平位置を調整する際に使用するCSSのプロパティです。
このプロパティを使用することで文字を左揃え、右揃え、中央揃えなどに配置することができます。
また、text-alignプロパティは、文字だけではなく画像の位置も調整することができます。
ただし、text-alignはブロックレベル要素にのみ適用することができるのであらかじめimgタグをdivなどのブロックレベル要素で囲っておく必要があります。
text-alignと一緒に覚えておきたいプロパティ
要素の水平方向を揃える際にはtext-alignプロパティを使いましたが、垂直方向を調整する場合はどのようなプロパティを使うのでしょうか。
垂直方向を調整する場合は、「vertical-align」プロパティを使用します。
指定できる値には、上方向（top）、中央（middle）、下方向（bottom）などそれ以外にもいくつかの値が用意されています。
全ての値を覚える必要はありませんが、垂直方向を調整したいと思ったときはここのプロパティを思い出せるようにしておきましょう。
