【html/CSS】ボタンを横並びで中央寄せ,右寄せにする方法

「修正するボタンと送信ボタンを横に並べて中央寄せにしたい！」

問い合わせフォームの確認画面では「修正する」か「送信する」を選択できるように2つのボタンを置くことがあります。

そんなボタンを横並びで中央寄せ,右寄せにする方法を解説します。

【方法1】text-align

inputのボタンやbuttonタグはinline-blockであり、これらは横に並びます。

そしてinline-blockは親にtext-alignを指定することで位置調整ができます。

aタグをボタンにした場合は「display:inline-block」を指定すると、この方法が可能になります。

【中央寄せ】親にtext-align:center

<style>
.example{
    /*コレ*/text-align: center;
}
.example input{
    margin: 5px;
}
</style>
<div class="example">
    <input type="button" value="修正する">
    <input type="submit" value="送信する">
</div>

【右寄せ】親にtext-align:right

<style>
.example2{
    /*コレ*/text-align: right;
}
.example2 input{
    margin: 5px;
}
</style>
<div class="example2">
    <input type="button" value="修正する">
    <input type="submit" value="送信する">
</div>

【方法2】table

tableを1行2列にしてそれぞれのtd内にボタンを置きます。

ちなみにtdの中はブロック要素でも大丈夫です。

そしてこのtableの位置を調整します。

【中央寄せ】tableにmargin:auto

<style>
.example3{
    /*コレ*/margin: auto;
}
.example3 input{
    margin: 5px;
}
</style>
<table class="example3">
    <tr>
        <td><input type="button" value="修正する"></td>
        <td><input type="submit" value="送信する"></td>
    </tr>
</table>

【右寄せ】tableにmargin-left:auto

<style>
.example4{
    /*コレ*/margin-left: auto;
}
.example4 input{
    margin: 5px;
}
</style>
<table class="example4">
    <tr>
        <td><input type="button" value="修正する"></td>
        <td><input type="submit" value="送信する"></td>
    </tr>
</table>

【方法3】display:flex

display:flexを指定した子要素は横に並びます。

display:flexとセットでjustify-contentを使うと横位置の調整が可能です。

【中央寄せ】親にjustify-content:center

<style>
.example5{
    /*コレ*/display: flex;
    /*コレ*/justify-content: center;
}
.example5 input{
    margin: 5px;
}
</style>
<div class="example5">
     <input type="button" value="修正する">
     <input type="submit" value="送信する">
</div>

【右寄せ】親にjustify-content:flex-end

<style>
.example6{
    /*コレ*/display: flex;
    /*コレ*/justify-content: flex-end;
}
.example6 input{
    margin: 5px;
}
</style>
<div class="example6">
     <input type="button" value="修正する">
     <input type="submit" value="送信する">
</div>

【まとめ】ボタンを横並びで中央寄せ,右寄せにする方法

【方法1】text-align

ボタンが横に並んでいる状態でtext-alignで位置調整

• 【中央寄せ】親にtext-align:center
• 【右寄せ】親にtext-align:right

【方法2】table

td内にボタンを入れ横に並べtableを位置調整

• 【中央寄せ】tableにmargin:auto
• 【右寄せ】tableにmargin-left:auto

【方法3】display:flex

display:flexでボタンを横に並べjustify-contentで位置調整

• 【中央寄せ】親にjustify-content:center
• 【右寄せ】親にjustify-content:flex-end

以上、ボタンを横並びで中央寄せ,右寄せにする方法でした。