CSS
LINEでログイン
Googleでログイン
Twitterでログイン
text-alignとは
text-alignプロパティとは、HTML要素内のテキストの水平位置を調整する際に使用するCSSのプロパティです。
このプロパティを使用することで文字を左揃え、右揃え、中央揃えなどに配置することができます。
また、text-alignプロパティは、文字だけではなく画像の位置も調整することができます。
ただし、text-alignはブロックレベル要素にのみ適用することができるのであらかじめimgタグをdivなどのブロックレベル要素で囲っておく必要があります。
text-alignと一緒に覚えておきたいプロパティ
要素の水平方向を揃える際にはtext-alignプロパティを使いましたが、垂直方向を調整する場合はどのようなプロパティを使うのでしょうか。
垂直方向を調整する場合は、「vertical-align」プロパティを使用します。
指定できる値には、上方向（top）、中央（middle）、下方向（bottom）などそれ以外にもいくつかの値が用意されています。
全ての値を覚える必要はありませんが、垂直方向を調整したいと思ったときはここのプロパティを思い出せるようにしておきましょう。
CSSの問題に挑戦しよう！
以下の問題に挑戦し、実際に手を動かして学習していきましょう。
無事に問題が解けて理解できれば、CSSマスターへの道の第一歩となるでしょう。
問題11：【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¥
期待する画面
解答ソースコード
.box p {
text-align: center;
}
¥CSS¥
補足
要素を中央に寄せるという点では、margin 0 autoと何が違うの?
と疑問を持つ方も多いのではなかと思います。
大きな違いは、margin 0 autoはブロック要素を中央寄せし、text-alignはインライン要素を中央寄せするという点です。
今後登場するjustify-contentなども中央寄せする際に使用するプロパティですが、明確な違いがあるので、ひとつひとつ覚えていきましょう。
と疑問を持つ方も多いのではなかと思います。
大きな違いは、margin 0 autoはブロック要素を中央寄せし、text-alignはインライン要素を中央寄せするという点です。
今後登場するjustify-contentなども中央寄せする際に使用するプロパティですが、明確な違いがあるので、ひとつひとつ覚えていきましょう。
完了にする！
活動記録をTweetする
左寄せならleft、右寄せならrightを指定しましょう。
text-alignは指定した要素とその子要素にも適用されます。
今回の問題であれば、box自体にtext-alignを指定しても中央寄せになりますが、boxの中に複数のp要素があれば全てが中央寄せされてしまいます。
状況に応じてセレクタを正しく指定しましょう。