【CSS】divをfloatなどで横に並べつつ中央寄せにする方法

1つのdivを中央寄せする方法は調べればいくらでも出てきますが、2つのdivを横にならべつつ、中央寄せする方法は意外とわからないものです。

divを横に並べつつ中央寄せにする方法を解説します。

ここではdivで紹介していますが、divをimgに変えて、画像でも同じことができます。

方法1.floatで横に並べ、外枠をmargin:autoで中央寄せにする

float:leftで左寄せ、float:rightで右寄せができますが、中央寄せ用の値はありません。

floatで横並べした要素を中央寄せしたい場合はその親要素を中央寄せしましょう。

完成イメージ

html

<div class="yokonarabe">
<div>テキスト</div>
<div>テキスト<br>テキスト</div>
</div>

CSS

.yokonarabe{
overflow:hidden;
width:300px;
margin:0 auto;
}
.yokonarabe>div{
float:left;
width:50%;
} 

親要素を中央寄せするには親要素にwidthとmargin:0 autoを指定しましょう。

子要素にfloatを指定しますが、親要素の幅を超えないように注意してwidthなどを指定しましょう。

メリット

• 昔ながらのやりかた

デメリット

• 崩れやすい
• ピッタリ計算が必要
• 幅が実質固定

floatでの横並べ中央寄せは調整が難しいため、この記事で紹介している他の方法も検討してみてください。

方法2.display:flexで横並べ＆中央寄せにする【オススメ】

「display:flex」は子要素の位置調整ができるCSSです。子要素は横並びになります。

この要素に「justify-content: center」をセットで指定すると子要素は中央寄せできます。

完成イメージ

html

<div class="yokonarabe">
<div>テキスト</div>
<div>テキスト<br>テキスト</div>
</div>

CSS

.yokonarabe{
display:flex;
justify-content: center;
}

メリット

• 縦をきれいに揃えられる
• 横幅の調整がいらない
• 崩れない

デメリット

• 新しい技術なので間違いやすいかも

方法3.display:inline-blockで横に並べ、text-align:centerで中央寄せにする

「display:inline-block」はブロック要素のようにwidthを指定することができるうえにインライン要素のように横並びになる要素です。

この親要素に「text-align:center」を指定することで中央寄せになります。

完成イメージ

html

<div class="yokonarabe">
<div>テキスト</div>
<div>テキスト<br>テキスト</div>
</div>

css

.yokonarabe{
text-align:center;
}
.yokonarabe>div{
display:inline-block;
}

メリット

• 横幅はautoにできる（文字量に応じて変化できる）

デメリット

• 要素の高さが異なる場合下ぞろえになる
• 両脇に空白ができる
• サイズによっては2行になる

方法4.tableで横並べし、margin:autoで中央寄せにする

tableは簡単に横並べできるhtmlです。

tableにmargin:autoを指定すると中央寄せになります。widthの指定はいりません。

完成イメージ

テキスト

テキスト テキスト

html

<table>
<tr>
<td><div>テキスト</div></td>
<td><div>テキスト<br>テキスト</div></td>
</tr>
</table>

css

table{
margin:0 auto;
}

divをなくしてtdにcssをかけると縦がそろいます。

メリット

• 昔ながらのやり方
• 崩れにくい
• tableにwidthを指定しなくていい

デメリット

• コードが多い

まとめ

• 方法1.floatで横に並べ、外枠をmargin:autoで中央寄せにする
• 方法2.display:flexで横並べ＆中央寄せにする【オススメ】
• 方法3.display:inline-blockで横に並べ、text-align:centerで中央寄せにする
• 方法4.tableで横並べし、margin:autoで中央寄せにする

以上、divや画像をfloatなどで横に並べつつ中央寄せにする方法でした。