ホームへ

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

2022年06月14日

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

問い合わせフォームの確認画面では「修正する」か「送信する」を選択できるように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>

CSSやhtmlの基本をしっかり理解すると、この記事の内容もより理解できるようになりますよ。

↓CSSやhtmlを楽しく学べるようにマンガを描きましたのでゼヒご覧ください↓

↑「副業してもう少し稼ぎたい!」というかたのために副業の方法も解説しています。

【方法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

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

「この記事の内容がよくわからなかった…」「なんかうまくいかなかった…」というかたは下記記事↓でhtmlとCSSの基本を学びましょう。
わからないまま突き進むより基本を学ぶのが結局近道です。

CSSやhtmlをマンガで学ぶ