ホーム(記事一覧)へ

divを横に並べつつ中央寄せにする方法

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

結論

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

以下で詳しく説明します。

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

完成イメージ

テキスト
テキスト
テキスト

html

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

css

.yokonarabe{
text-align:center;
}
.yokonarabe>div{
display:inline-block;
border:1px solid #999;
}

メリット

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

デメリット

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

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

完成イメージ

テキスト
テキスト
テキスト

html

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

CSS

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

メリット

  • 昔ながらのやりかた

デメリット

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

方法3.display:flexで横並べ&中央寄せにする

完成イメージ

テキスト
テキスト
テキスト

html

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

CSS

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

メリット

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

デメリット

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

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

完成イメージ

テキスト
テキスト
テキスト

html

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

css

table{
margin:0 auto;
}

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

メリット

  • 昔ながらのやり方
  • 崩れにくい
  • tableには幅指定しないでいい

デメリット

  • コードが多い

まとめ

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

以上、divを横に並べつつ中央寄せにする方法でした。

関連記事