SIMaタグでボタンを作るときにテキストを上下左右とも中央寄せにする方法を紹介します。
今回紹介する方法は、flexboxとgrid CSSを使った２種類の方法です。
CSSのコードの長さはflexboxが３行、grid CSSが２行と、どちらも短いです。
結論ザックリ
SIMはじめに完成品として、下記CodePenを載せておきますので、表示とコードをご確認下さい。
下のCodePenでは青色のボタンがflexbox、赤色のボタンがgrid CSSで作ったものです。
See the Pen Centering a tag by Satoru Shimizu (@sat-simizu) on CodePen.
flexboxの中央寄せ
SIMまずはflexboxの中央寄せコードを紹介します。
HTML
HTMLは下記のようにaタグ１行のみでOKです。
<!-- flexbox用のボタン -->
<a href="#" class="c-button_a">問い合わせる</a>CSS
flexboxを利用した中央寄せのためのコードは下記のとおりです。
下から３行が上下左右の中央寄せに必要なコードです。
/* flexboxで作ったボタン */
.c-button_a{
background-color: #0066cc;
color: #fff;
padding: 20px;
font-size:18px;
max-width: 200px;
witdh: 100%;
margin:0 auto;
border-radius: 5px;
display: flex;
justify-content: center;
align-items: center;
}余計な装飾が多くて紛らわしいので、必要箇所だけを抜粋したCSSとHTMLも下に載せておきます。
「display: flex;」で「justify-content: center;」と「align-items: center;」を指定するだけでOKです。
display: flex;
justify-content: center;
align-items: center;grid CSSの中央寄せCSSコード
SIM次にさらに簡単なCSS gridで中央寄せする方法を紹介します。
HTML
上で紹介したflexboxと同じですので省略します。
CSS
grid CSSを利用した中央寄せのためのコードは下記のとおりです。
下から２行が上下左右の中央寄せに必要なコードです。
/* grid CSSで作ったボタン */
.c-button_b{
background-color: #942146;
color: #fff;
padding: 20px;
font-size:18px;
max-width: 200px;
witdh: 100%;
margin:0 auto;
border-radius: 5px;
display: grid;
place-items: center;
}こちらも余計な装飾を省いて、必要なコードだけを抜粋します。
display: grid;
place-items: center;このように、grid CSSで上下左右とも中央寄せする場合は、たったの２行で済みます。
「display: grid;」に「place-items: center;」を指定するだけです。
まとめ
SIM以上のように、ボタンをaタグで作るときにはflexboxかgrid CSSを使えば簡単に中央寄せできます。
もちろん、今回紹介した方法はaタグだけではなく、他のタグでも使うことができます。
例えば、グローバルナビゲーションを作る時によく使います。
