ホームページの作成・作り方

ボタンを中央揃えする4つの方法|CSSで作るボタンリファレンス

CSSで作ったボタンを中央揃えする4つの方法

今回作ったのが、下の4つです。
単に中央揃えと言っても、様々なコードの書き方があります。
あくまで一例として捉えてください。

See the Pen ボタン位置 by takayuki (@Hamuo) on CodePen.0

親要素でtext-align

まずは一番簡単な、「親要素でtext-align」です。
上の例だと④に該当します。

<div> ←センタリングするdiv要素
<a href="#">Button</a>
</div>

形を整えたaタグを、センタリングするためのdiv要素で囲うというやり方です。
比較的簡単に設定でき、どこでも使えるので初心者の方にはおすすめです。

ブログなどで使いたい場合にも、この方法がいいでしょう。

position

positionを使った方法です。
親要素にposition:relativeを使い、ボタンの要素にposition:absoluteを使います。
上の例だと①になります。


<div> ←position:relative;
<a href="#">Button</a> ←position:absolute;
</div>

positionの全ての要素を0にして、marginをautoにすると、親要素に対して、上下左右の中央揃えができます。
特定の要素の上下左右できっちりド真ん中に配置したいときは、positionを使うといいでしょう。

text-align

1つ目で紹介した方法に近いですが、親要素内の全てのテキストを中央揃えするなら、このやり方でいいでしょう。


<div> ←text-align:center
<a href="#">Button</a> 
</div>

LPの特定のメッセージ部分など、要素内の全てを中央揃えする場合はこの方法がおすすめです。

margin:auto

aタグをblock要素にして、margin:autoにする方法です。


<a href="#">Button</a> ←margin:auto;

margin:autoを使う場合、block要素のwidthを設定する必要があります。
margin:autoを設定して、中央揃えが効かない場合は、widthの設定を忘れていることが多いので、確認してみましょう。

まとめ

ブログで使う場合は、①の方法がおすすめです。
ボタンの要素自体をセンタリングする要素で囲うので、周りの状況に左右されずに中央揃えしやすいです。