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

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

目次

• ボタンを中央に配置する方法
• インライン要素・インラインブロック要素の場合
• ブロックレベル要素の場合
• Flexboxを使用して中央に配置する場合
• 執筆してくれたメンター
• 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を学習していて、このように思ったことはありませんか？

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

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

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

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