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

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

 

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

 

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

 

 

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

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

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

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

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

インライン要素の場合

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

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

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

実際に書いてみよう

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

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

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

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

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

実際に書いてみよう

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

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

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

実際に書いてみよう

 

 

執筆してくれたメンター

井内洋平 TechAcademyの現役メンター。 元Web Developerで、趣味は貯金、節税対策、投資信託、株式投資、FXなど多岐にわたる。

 

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

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