CSSでボタン内の文字を中央寄せにする方法

「ボタンを作ったけど文字が左上にぴったりくっついていてバランスが悪い。文字をボタン内で中央寄せしたいけどどうやるの？」

CSSでボタン内の文字を左右中央、上下中央寄せにする方法を解説します。

左右中央寄せ

【widthなし】padding

<style>
.example{
    /*コレ*/padding: 10px 30px;
    background: #e3f2fd;
    border: 1px solid #333;
}
</style>
<input class="example" type="button" value="ボタン">

paddingは内側の余白を調整するCSSです。

paddingで上下、左右それぞれの数値を同じにすると実質縦も横も中央寄せにできます。

paddingについて詳しくはこちら↓

【widthあり】text-align: center

ボタン

<style>
.example2{
    display: block;
    width: 50%;
    /*コレ*/text-align: center;
    padding: 10px 0;
    background: #e3f2fd;
    border: 1px solid #333;
}
</style>
<a class="example2" href="#">ボタン</a>

aタグで「display: block」を指定したボタンを作った場合、paddingだけでは左右の中央寄せができません。

text-alignは子要素のインライン要素の左右の位置を調整するCSSです。

text-align: centerを指定して左右中央寄せしましょう。

縦の中央寄せはpaddingで十分です。

上下中央寄せ

【heightなし】padding & line-height

ボタン

<style>
.example3{
    display: block;
    width: 50%;
    /*コレ*/line-height: 3;
    /*コレ*/padding: 10px 0;
    text-align: center;
    background: #e3f2fd;
    border: 1px solid #333;
}
</style>
<a class="example3" href="#">ボタン</a>

line-heightは行間を指定するCSSです。文字サイズを1として数値を指定します。{（指定した数値-1）÷2}×文字サイズ が上と下の空間となります。

1行のボタンならline-heightで上下中央寄せすることができます。

またはpaddingで上下の空白を同じにすることでテキストを上下中央寄せできます。

【heightあり】display:flex & align-items: center

ボタン

<style>
.example4{
    height: 100px;
    /*コレ*/display: flex;
    /*コレ*/justify-content: center;
    /*コレ*/align-items: center;
    width: 50%;
    text-align: center;
    background: #e3f2fd;
    border: 1px solid #333;
}
</style>
<a class="example4" href="#">ボタン</a>

heightを指定する場合display: flexを使いましょう。

display: flexは子要素の位置調整ができるCSSです。

align-itemsはflexとセットで使い、縦の位置を指定できます。

align-items: centerは上下中央寄せです。

justify-contentはflexとセットで使い、横の位置を指定できます。

justify-content: centerは左右中央寄せです。

【まとめ】ボタン内の文字を中央寄せにする方法

左右中央寄せ

• 【widthなし】padding
• 【widthあり】text-align: center

上下中央寄せ

• 【heightなし】padding & line-height
• 【heightあり】display:flex & align-items: center

以上、CSSでボタン内の文字を左右中央、上下中央寄せにする方法でした。