はじめに
未来電子テクノロジーでインターンをしている＠reies1204です。
今回は自分が以前に要素の中央寄せについて学んだ色んな方法をどのように使い分けるのか、しっかり理解できていなかったので今回は中央寄せについて使い方も兼ねてまとめていこうと思います。
ただし、プログラミング初心者であるため、内容に誤りがあるかもしれません。
もし、誤りがあれば修正するのでどんどん指摘してください。
左右の中央寄せ
テキストを中央寄せする場合
まずテキストを左右で中央寄せる場合は、そのテキストが含まれる要素、もしくはその親要素にtext-align:center;を指定します。
画像を中央寄せする場合
画像もテキストと同様にtext-align:center;を使うことで中央に寄せることができます。ただし、画像の場合はimgタグではなく、imgタグの親要素に対してtext-align:center;を指定する必要があります。
つまり、例えば
<body>
<div class="example">
<p>
<img src="##">
</p>
</div>
</body>
となった場合、ここではCSS にて親要素のp要素に対してtext-align:center;を指定します。
ブロック要素を中央寄せする場合
ブロック要素を中央寄せする場合、上記のテキストや画像を中央寄せするときと異なりtext-align:center;を指定しても、要素の中身が中央寄せされるだけで要素自体の位置は変わりません。
これはCSS のルールとしてブロック要素に対してはtext-align:center;は効かないという仕様があるからです。
そこで要素の外側に余白を指定するmarginプロパティを使います。
先ほどの例からexampleクラスを中央寄せしてみると
.example {
margin:10px auto;
width:100px;
}
といったようになります。
つまり、ここでは「指定した要素は幅100pxで上下に10pxの余白、左右は中央になるように自動で配置」ということになります。
ただし、これはあくまで要素の中での中央寄せなので、「中央に寄せたい要素はどの親要素の中での指定なのか」ということに注意が必要になります。
インラインブロック要素を活用する方法も
ブロック要素をインラインブロック要素へと表示し直してから、親要素に対してtext-align:center;を指定することで中央に寄せるという方法もあります。
上下での中央寄せ
先ほどは左右での中央寄せについてtext-align:center;やmarginを使った方法をまとめましたが、次は上下での中央寄せについてまとめます。
要素、ボックス内の中身を縦に中央寄せる方法
親要素で縦方向に中央寄せしたい場合には、行の高さ(line-height)を親要素の高さに合わせることでできます。
例えば、親要素の高さがheight:50px;としていた場合、子要素の高さをline-height:50px;とすることで中央寄せができます。
ただし、これは中のテキストが一行のときしか使えないので注意が必要です。
さいごに
今回は中央寄せについて、条件に応じた色々な方法をまとめてみました。
自分自身これらを中央寄せの方法としてしか覚えられていなかったので、今回それぞれどのような条件ごとに使えるのかまとめられて良かったと思います。
これからも学習続けます。