中央寄せのレイアウト

このように全体を中央寄せにしたいが、一番下のボタンは左寄せにするやり方を紹介します。デモ

完成イメージ

さっそくソースです。

  • html
<div class="continer">
  <div class="section">
    <div class="row">
      <button type="button" name="button">ボタン1</button>
      <button type="button" name="button">ボタン2</button>
    </div>
    <div class="row">
      <button type="button" name="button">ボタン3</button>
      <button type="button" name="button">ボタン4</button>
    </div>
    <div class="row">
      <button type="button" name="button">ボタン5</button>
    </div>
  </div>
</div>
  • css
.continer {
      max-width: 600px;
      margin: auto;
      text-align: center;
      border: solid 1px black;
}
.section {
      display: inline-block;
      text-align: left;
      border: solid 1px red;
}

ポイントは、次の通りです。

外側のdiv.continer

  • max-width: 600px で、margin: autoで中央寄せにします。
  • text-align: center;を指定して、内側の要素を中央寄せにします。

内側のdiv.section

  • display: inline-blockを指定して、自身を中央寄せにします。
  • text-align: left;を指定して、内側の要素を左側にします。

補足

このやり方は、ボタンの長さが全て均等である必要があるので注意してください。

以上です。

comments powered by Disqus