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

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

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営。初心者向けに解説した記事が4,000以上あります。現役エンジニアの方はこちらをご覧ください。

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

 

CSSについてそもそもよく分からないという方は、CSSの書き方について解説した記事をご覧ください。

 

なお本記事は、TechAcademyのオンラインブートキャンプ、Webデザイン講座のCSSカリキュラムをもとに執筆しています。

 

田島悠介

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

大石ゆかり

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

田島悠介

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

大石ゆかり

お願いします!

 

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

ボタンとして装飾を施す場合、

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

それぞれの要素で画面の中央に配置するための方法が異なります。

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

インライン要素の場合

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

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

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

実際に書いてみよう

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

ブロックレベル要素の場合、幅の値を指定しなければ、ブロックレベル要素の親要素の幅を100%の値として継承することになります。

しかし、そのような場合では画面の中央に配置できません。

ブロックレベル要素を画面の中央に配置するためには、ブロックレベル要素の親要素に対して、幅の差分が必要です。

marginの左右の値にautoを指定することで、差分が余白として使用することで画面の中央に配置できます。

実際に書いてみよう

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

インラインブロック要素は、インライン要素の特性を引き継いでいます。

インライン要素と同様に、インラインブロック要素を包括しているブロックレベル要素の親要素に対して、text-align: center; を指定することで画面の中央に配置することが可能です。

実際に書いてみよう

 

 

執筆してくれたメンター

井内洋平

TechAcademyの現役メンター。

元Web Developerで、趣味は貯金、節税対策、投資信託、株式投資、FXなど多岐にわたる。

 

大石ゆかり

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

田島悠介

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

大石ゆかり

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

TechAcademyでは初心者でも、最短4週間でオリジナルWebサイトを公開できる、オンラインブートキャンプを開催しています。

また、現役エンジニアから学べる無料体験も実施しているので、参加してみてください。