ホーム(記事一覧)へ

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で十分です。

【縦の調整】line-height

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

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

1行のボタンならline-heightで縦を中央寄せすることもできます。

ただし2行以上だとアンバランスになるため、paddingをオススメします。

【heightを指定するなら】display:flex

ボタン
<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(横)

padding(縦)

1行なら

line-height(縦)

heightを指定するなら

display: flex; justify-content: center; align-items: center;(縦横)

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

関連記事