HTMLとCSSでボタンを中央に配置する方法【状況別テクニック徹底解説】

HTMLとCSSを使って、ブロック要素やインラインブロック要素のボタンを中央に配置するには、どうすればよいのでしょうか?

一見難しそうに感じますが、要素の種類ごとに適切な方法を知っていれば、どんなボタンでも簡単に中央寄せできます。この記事では、実践的なテクニックをコード例とともにわかりやすく解説します。

インラインブロック要素のボタンを中央に配置する

<button>や<a>(リンク)要素は、デフォルトでdisplay: inline-blockが設定されています。インラインブロック要素は、通常のドキュメントフローの中で左から右へと流れるように配置されます。

つまり、インラインブロック要素を2つ並べると、横方向に十分なスペースがあれば、それらは横並びで表示されるということです。

これはdisplay: inlineが設定された要素と似ていますが、インラインブロック要素では高さ(height)と幅(width)を指定できる点が異なります。インライン要素ではこれらを制御できません。

text-align: center を使った中央寄せ

インラインブロック要素(およびインライン要素)は、親要素にtext-align: centerを設定することで中央に配置できます。

実際のコードで確認してみましょう。まずはHTMLマークアップです。

<div class="text-center">
  <button type="submit">text-align: center</button>
</div>

続いてCSSです。

.text-center {
  text-align: center;
}

ここでは、<button>要素をtext-align: centerを設定した<div>で囲んでいます。これにより、ボタンは次のように中央に表示されます。

固定幅を持つブロック要素のボタンを中央に配置する

ブロック要素はデフォルトで幅いっぱいに広がるため、text-align: centerでは中央寄せできません。ただし、静的な(固定の)幅を指定している場合は話が変わります。

ボタンに固定幅を設定したいケースはよくあります。その場合は、以下のテクニックでページ上の中央にボタンを配置できます。

たとえば、幅200pxに設定したボタンがあるとします。幅こそ200pxですが、ブロック要素であるため、他の要素はその横に配置されません。

ブロックレベル要素を中央に配置するには、margin-leftとmargin-rightにautoを設定します。ショートハンドのmargin: 0 autoを使えば簡潔に書けます(この場合、margin-topとmargin-bottomも同時に0に設定されます)。

コードでは次のようになります。

<button type="submit" class="block magenta margin-auto">margin: 0 auto</button>

.button.block {
    display: block;
    width: 200px;
}

.margin-auto {
    margin: 0 auto;
}

ページ上では、ボタンは次のように表示されます。

Flexboxを使った中央寄せ

あるいは、Flexboxを使えば、インラインブロック要素とブロック要素のどちらも中央に配置できます。

ボタンを親の<div>で囲み、親要素にdisplay: flexとjustify-content: centerを設定しましょう。

コードは以下の通りです。

<div class="flex-parent jc-center">
  <button type="submit">Inline-block button</button>
</div>

<div class="flex-parent jc-center">
  <button type="submit">Block button</button>
</div>

.flex-parent {
  display: flex;
}

.jc-center {
  justify-content: center;
}

2つのボタンを横並びで中央に配置する

2つのボタンを隣り合わせに配置しつつ、両方まとめてページの中央に置きたい場合もあるでしょう。

その場合は、両方のボタンを1つの親<div>で囲み、Flexboxで中央寄せすれば実現できます。

コード例はこちらです。

<div class="flex-parent jc-center">
  <button type="submit" class="green margin-right">Confirm</button>
  <button type="submit" class="magenta">Cancel</button>
</div>

.flex-parent {
  display: flex;
}

.jc-center {
  justify-content: center;
}

button.margin-right {
  margin-right: 20px;
}

ポイントとして、最初のボタンにmargin-right: 20pxを追加することで、2つのボタンの間に適度なスペースを設けています。

実際の表示は次のようになります。

すべてのコードはCodepenで実際に確認できます。ぜひ手を動かしながら、自分のプロジェクトに合った中央寄せの方法を見つけてください。