ウェブページやブログのデザインで、要素の中央揃えは一般的な方法の一つです。
本記事では、CSSを利用したテキストや画像、div要素などさまざまな要素中央揃えの実装方法や、留意すべきポイントについて紹介します。
画像とテキストを横並びして、縦（垂直方向）中央揃えに
画像とテキストを横に並べてなおかつ画像の縦方向の真ん中にテキストを置きたい時はよくあります。サイトのヘッダーなどでロゴ画像とサイトタイトルを並べたい時など。。。
しかし、ただ画像とテキストを横並びしただけではバランス良く並ばないためCSSで調整する必要があります。ここからは具体的な実装方法や留意すべきポイントについて詳しく説明します。
さらに縦中央揃えにおける注意点や、レスポンシブに対応する方法についても解説します。
画像とテキストが1行の時の横並び、縦中央揃え
display:flexを使う方法
See the Pen 画像とテキストの横並び flexbox by mixtaro (@mixtaro) on CodePen.
上記のサンプルではロゴ画像imgとテキストh1をaで囲んでdisplay:flexを適用しています。
a {
display:flex;
align-items: center;
}横並びも縦方向の中央揃えもflexboxなら簡単にできますね。
display:inline-blockを使う方法
See the Pen 画像＋テキスト複数行 横並び by mixtaro (@mixtaro) on CodePen.
display:inline-blockでは縦方向の中央揃えvertical-align:middleが利用できます。
まずimgとh1をラップしているaタグにdisplay:blockにします。そしてimgとh1にdisplay:inline-blockとvertical-align:middleを適用します。
画像とテキスト複数行の場合
テキストが複数行だった場合の縦方向中央揃え。
htmlをちょっと修正しました。html5ではaタグの中にdivを含めることは可能になったのでロゴ画像imgとサイト名を囲んだdiv.site-titleを丸ごとaタグで囲むことにしました。
Flexboxで画像とテキスト複数行の横並び
<a href="index.html">
<img src="logo.png" alt="LOGO">
<div class="site-title">
<h1>とくしよネット</h1>
<p>レンタルサーバーレビューとWeb制作Tips</p>
</div>
</a>
先程とほぼ同じですがh1とpをdivで囲むことで、aに設定したdisplay:flexで子要素のimgとdiv.site-titleが横並びが適用されます。
See the Pen 画像＋テキスト複数行 横並び by mixtaro (@mixtaro) on CodePen.
display:inline-bolockを使う方法
See the Pen 画像＋テキスト複数行 横並び display:inline-bolock by mixtaro (@mixtaro) on CodePen.
vertical-alignを有効にするために.site-titleをdisplay:inline-blockでインラインにし、vertical-align:middleを指定します。
テキストの余白を調整するためpタグをline-height:1にして行の高さをフォントサイズと同じにします。
display:tableを使う方法
See the Pen 画像＋テキスト複数行 横並び display:table by mixtaro (@mixtaro) on CodePen.
a要素をテーブルとして表示し、a>img要素にvertical-align: middleを適用して画像を垂直方向に中央揃えしています。そして、div.site-titleをテーブルセルにし、vertical-align: middleを使用して要素の垂直方向の中央揃えにします。
img要素はインラインレベル要素なので初期状態でvertical-alignが有効です。
ブロックレベル要素でvertical-alignが有効になる条件は
・要素のdisplayプロパティが、inline, inline-block, table-cell, table-captionの時
・要素の親要素がテーブルセルである時
になります。
以上、画像とテキストを横並びにして縦方向中央に揃えるでした。
画像とテキストの横並びにするというのはデザイン上よくあることですがflexboxが登場してより簡単に実現できるようになりました。
要素が可変する時にCSSで上下左右中央揃え（センタリング）のまとめ
センタリングしたい要素のサイズが可変の場合に有効な上下左右中央揃えの実装方法をまとめます。
Flexboxを使う方法
前述の通りdisplay:flexなら上下左右の中央揃えも簡単にできます。
.wrapper{
display:flex;
justify-content:center;
align-items:center;
height:150px;
}テキストが短い場合はこれだけでも中央揃えできますが、テキストが複数行になる（横幅が可変する）場合も見ていきます。
flex-growを指定する
.content2{
flex: 0 1 60%;
}センタリングする要素の最大幅を指定したい場合、flex-basisに最大幅を指定します。さらにflex-grow:0 / flex-shrink:1 に指定するとmax-widthを指定した時と同じようになります。
flexショートハンド
flex : flex-grow（初期値:0） | flex-shrink（初期値:1） | flex-basis（初期値:auto）
marginを指定する
.content3{
margin:auto;
max-width:60%;
}marginをauto、max-widthを指定しても上下左右中央揃えになります。
See the Pen 上下左右中央揃え flexbox by mixtaro (@mixtaro) on CodePen.
wrapperの高さよりもcontentの高さが大きくなった場合ははみ出してしまう
スマホなど画面サイズが小さい時、wrapperの高さよりcontentの高さを超える場合はcontent要素がはみ出てしまいます。
メディアクエリーでスマホの時はwrapperの高さをautoにすればはみ出さなくなります。
@media screen and (max-width:600px){
.wrapper{
height:auto;
}
}positionとtransformを使う方法
position:absoluteとtransformを使って上下左右中央に配置する方法です。
この方法ではテキストが複数行になってもセンタリングする要素の幅を指定しなくても中央揃えになります。この場合の最大幅は50％になります。
widthを50％以上にしたい時はcontentにwidthを指定する必要があります。
またwrapperにpositionを指定しているので高さの指定が必要です。
See the Pen 上下左右中央揃え position/transform by mixtaro (@mixtaro) on CodePen.
この方法も、wrapperよりcontentの高さが大きくなったらはみ出してしまいます。状況に合わせてwidthやheightの調整が必要です。
table-cellを使う方法
親要素wrapperにdisplay:table、中央寄せしたい子要素contentにdisplay:table-cellを指定します。
display:table-cellの時はvertical-alignが使えます。
.content{
display:table-cell;
vertical-align:middle;
text-align:center;
}この手法では、センタリングする子要素contentのボリュームが多くなってもはみ出さずに量に応じて、wrapperは伸縮します。
See the Pen 上下左右中央揃え table-cell by mixtaro (@mixtaro) on CodePen.
