CSSでボタンを中央に配置する方法を現役エンジニアが解説【初心者向け】

初心者向けにCSSでボタンを中央に配置する方法について解説しています。ここではインライン要素の場合、ブロックレベル要素の場合、インラインブロック要素の場合それぞれの場合の書き方を説明します。サンプルコードと実行結果を確認しましょう。

TechAcademyマガジンは受講者数No.1のオンラインプログラミングスクールTechAcademy [テックアカデミー]が運営。初心者向けに解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。

CSSでボタンを中央に配置する方法について、テックアカデミーのメンター(現役エンジニア)が実際のコードを使用して初心者向けに解説します。

目次

そもそもCSSの記述方法がわからない場合は、 CSSの書き方について解説した記事を読むとさらに理解が深まります。

 

田島悠介

今回は、CSSに関する内容だね!

大石ゆかり

どういう内容でしょうか?

田島悠介

ボタンを中央に配置する方法について詳しく説明していくね!

大石ゆかり

お願いします!

 

ボタンを中央に配置する方法

ボタンを中央に配置する場合、ボタンの要素がどの要素で作られているかによって、中央に配置する方法が異なります。
代表的な要素の種類としては以下の3つです。

  • ブロックレベル要素
  • インライン要素
  • インラインブロック要素

リンクのボタンとしてよく使用される要素<a>タグは、元々はインライン要素ですが、displayプロパティの値を変更することでブロックレベル要素、インラインブロック要素に変更できます。

また、ボタンの要素の種類に関係なく、Flexboxを使用して中央に配置することも可能です。

それぞれの要素でボタンを中央に配置する方法をみていきましょう。

インライン要素・インラインブロック要素の場合

インライン要素では、インライン要素の親要素のブロックレベル要素に対して、text-align: center; を指定することで画面の中央に配置できます。

なお、誤解されやすい部分として、インライン要素のmarginの左右の値にautoを指定しても無効になります。

marginは、ブロックレベル要素の外側の余白を設定するために使用するプロパティです。

 

実際に書いてみよう

<a>タグのリンクを背景色とボーダーでボタンらしい装飾にして、中央配置にしてみます。

<a>タグは元々インライン要素なので、display:inline-block;を追加したものと見比べてみてください。

HTML

<div class="area">
  <p>インライン要素のボタンは他の要素と重なってしまいます。</p>
  <a class="button" href="#">BUTTON</a>
</div>

<div class="area">
  <p>インラインブロック要素のボタンは大丈夫!</p>
  <a class="inline-block button" href="#">BUTTON</a>
</div>

CSS

.button{
  background:gold;
  padding:1em 1em;
  border:black 2px solid;
  text-decoration:none;
  font-size:1.5em;
}
.inline-block{
  display:inline-block;
}

表示結果
ボタンを中央配置する

どちらもボタンの親要素の.areaにtext-align:center;を適用することで、ボタンを中央に配置することができました。

しかし、インライン要素のボタンは<p>要素とかぶってしまっています。

これはインライン要素が高さや幅を持たず、文の一部のように扱われてしまう性質があるためです。

上記のようにボタンらしい装飾をしたい場合には、<a>タグをインラインブロック要素、またはブロック要素にするとよいです。

[PR] HTML/CSSで挫折しない学習方法を動画で公開中

ブロックレベル要素の場合

ブロックレベル要素の場合、幅の値を指定しなければ、横幅が親のブロック要素いっぱいになってしまう性質があります。

そのため、インライン要素やインラインブロック要素の時とは違い、widthでボタンの横幅を指定します。

横幅を指定した上で左右のmarginの値をautoにすると、自動的に中央に配置されます。

 

実際に書いてみよう

先ほどインライン要素・インラインブロック要素で作ったものと、同じ見た目のボタンをブロックレベル要素にして中央に配置してみます。

 

HTML

<div class="area">
  <p>ブロックレベル要素のボタンを中央配置</p>
  <a class="block button" href="#">BUTTON</a>
</div>

CSS

.button{
  background:gold;
  padding:1em 1em;
  border:black 2px solid;
  text-decoration:none;
  color:black;
  font-size:1.5em;
  font-family:sans-serif;
}

.block{
  display:block;
  width:150px;
  margin:0 auto;
}

表示結果

ボタンを中央に配置する

インライン要素・インラインブロック要素で作ったボタンと同様に、ボタンを中央に配置することができました。

 

ブロックレベル要素とインライン要素・インラインブロックレベル要素の違いは、ブロックレベル要素以外は隣に並べることができる点です。

HTML

<div class="area">
  <p>インラインブロック要素のボタンを複数配置</p>
  <a class="inline-block button" href="#">BUTTON</a>
  <a class="inline-block button" href="#">BUTTON</a>
</div>

<div class="area">
  <p>ブロックレベル要素のボタンを複数配置</p>
  <a class="block button" href="#">BUTTON</a>
  <a class="block button" href="#">BUTTON</a>
</div>

※CSSは先ほどのインラインブロック要素のボタン・ブロック要素のボタンのを作った時と同じものを適用しています。

 

表示結果

ボタンを中央配置

インライン要素は横に並び、ブロック要素は横に並ばないという性質も踏まえて、ボタンをブロックレベル要素で作るか、インラインブロック要素で作るかを使い分けてみてください。

 

Flexboxを使用して中央に配置する場合

Flexboxで利用できるjustify-content:center;を使用することで、中にある要素(flex-item)を中央に表示できます。

 

HTML

<div class="flex">
  <a class="button" href="#">BUTTON</a>
</div>

CSS
.flex{
  padding:50px 0;
  display:flex;
  justify-content:center;
}
.button{
  background:gold;
  padding:1em 1em;
  border:black 2px solid;
  text-decoration:none;
}

表示結果

ボタンの中央配置

Flexboxを使用する場合、flex-direction:column;を適用していたら、justify-contentではなくalign-items:center;を使用します。

Flexboxの使い方について、詳しくは レイアウトの調整に役立つ!CSSのflexboxの使い方【初心者向け】も参考にしてみてください。

 

ボタンの配置について3つの方法を挙げてみました。

 

配置する場所やボタンの形状など、使用する場面に合わせて最適な方法を使用してください。

 

執筆してくれたメンター

橋本真理

Web/グラフィックのデザイナー

会社・店舗等のWebサイトのデザインから制作一式、ロゴや各種広告などのグラフィックデザインを主に活動しています。テックアカデミーではWebデザインコース・WordPressコースを担当しています。

ラジオとバナナが好き。

 

大石ゆかり

CSSでボタンを中央に配置する方法がよくわかったので良かったです!

田島悠介

ゆかりちゃん、これからも分からないことがあったら質問してね!

大石ゆかり

分かりました。ありがとうございます!

 

CSSを学習中の方へ

これで解説は終了です、お疲れさまでした。

  • つまずかず「効率的に」学びたい
  • 副業や転職後の「現場で使える」知識やスキルを身につけたい

CSSを学習していて、このように思ったことはありませんか?

テックアカデミーのWebデザインコースでは、第一線で活躍する「プロのWebデザイナー」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。

合格率10%の選考を通過した、選ばれたWebデザイナーの手厚いサポートを受けながら、オリジナルのWebサイト制作を学べます。

まずは一度、無料体験で学習の悩みや今後のキャリアについて話してみて、「現役Webデザイナーから教わること」を実感してみてください。

時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします!