マンガでわかるホームページ作成

CSSでボタンを中央寄せや右寄せにする方法

「ふつうにボタンを作ると左寄せになってしまう。ボタンを中央寄せや右寄せにするにはどうするの?」

というあなたへ、CSSでボタンを中央寄せや右寄せにする方法を解説します。

ボタンがインライン要素なのかブロック要素なのかでやりかたが異なるので要注意です。

インライン要素の場合:親にtext-align

ボタンがインライン要素の場合は親要素に「text-align」を指定しましょう。

text-alignは子要素かつインライン要素の並びを指定するCSSです。

インライン要素とは文字のように横に並ぶ要素です。

inputやbuttonタグ、aタグの初期状態はインライン要素です。

中央寄せ text-align:center

text-align:centerを指定すると中央寄せになります。

<style>
.example{
    /*コレ*/text-align: center;
    border: 1px solid #999;
    padding: 10px;
    background: #fff9cc;
}
</style>
<div class="example">
    <button>ボタン</button>
</div>

右寄せ text-align:right

text-align:rightを指定すると右寄せになります。

<style>
.example{
    /*コレ*/text-align: right;
    border: 1px solid #999;
    padding: 10px;
    background: #fff9cc;
}
</style>
<div class="example">
    <button>ボタン</button>
</div>

ブロック要素の場合:margin

ボタンがブロック要素の場合は自身に「margin」とautoを指定しましょう。

inputやbuttonタグ、aタグの初期状態はインライン要素です。これに「display: block」を指定するとブロック要素にできます。

ブロック要素にすることでボタンらしい装飾がしやすくなります。

中央寄せ margin:auto

<style>
.example2 a{
    display: block;
    padding: 10px;
    background: #f2f2f2;
    border: 1px solid #999;
    color: #333;
    width: 200px;
    /*コレ*/margin: auto;
    text-align: center;
}
.example2{
    border: 1px solid #999;
    padding: 10px;
    background: #fff9cc;
}
</style>
<div class="example2">
    <a href="#">ボタン</a>
</div>

margin:autoは左右のmargin(隙間)を自動調整します。

つまり左右中央寄せすることができます。

厳密には「margin:0 auto 0 auto」という状態です。

margin-topとmargin-bottomのautoは0なので「margin:auto」でOKです。

中央寄せの注意点として、「ブロック要素であること」「widthがautoや100%でないこと」があげられます。詳しくは下記をご覧ください。

右寄せ margin-left:auto

<style>
.example2 a{
    display: block;
    padding: 10px;
    background: #f2f2f2;
    border: 1px solid #999;
    color: #333;
    width: 200px;
    /*コレ*/margin: auto;
    text-align: center;
}
.example2{
    border: 1px solid #999;
    padding: 10px;
    background: #fff9cc;
}
</style>
<div class="example2">
    <a href="#">ボタン</a>
</div>

中央寄せの場合はmarginの左右両方にautoを指定した状態でした。

右寄せにしたい場合は左のmarginだけ最大になればいいので「margin-left:auto」を指定します。

まとめ

中央寄せ右寄せ
インライン要素親にtext-align:center親にtext-align:right
ブロック要素margin:automargin-left:auto

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

関連記事