ボタンの文字の上下左右中央寄せテクニック(HTML CSS)

サイト制作で実際に使ったテクニックを紹介していきます。

文字を上下左右中央寄せにしたボタンを作りたい場合、CSSで下記を使うと簡単です。

display: flex;
justify-content: center; 　　　　　　　　　　//左右の中央寄せ
align-items: center;　　　　　　　　　　　　　　　　　//上下の中央寄せ

こちらでもできます。こちらは４つ目の例でheightを指定しない場合です。

text-align: center;                    //文字の中央寄せ
padding: 16px;　　　　　　　　               //上下左右の余白

簡単ですが、下記にボタンのサンプルを置いておきます。

See the Pen
ボタンのテキスト上下中央寄せ by ga45sce (@ga45sce)
on CodePen.