[CSS] フォームの「送信ボタン」を中央揃えに! どの端末で見ても真ん中にする技!!

ボタンの左に余白を……

最初、私は<input>タグ自体に、「margin」とかで一生懸命、ボタンの両側に空白を入れようとしていました。

そう。ちょうどこんな感じで、両サイドに空白の自動調整（auto）を入れて、中央揃えをやろうとしていたのですが……

input { margin : 0 auto ; }


これが効かない!! 効かないもんだから、なんか妙に焦り始めました。アレ? でけんかったっけ? え? え? ええ～～～!!!???

もう冷静さを失っています。ドラクエで言うと「ヨス の れいせいさ が 50ポイント さがった!」です。

なので仕方ない! 左に余白（margin）を入れて、右側へ動かしたれ! と愚かなことを考えつきました。

input { margin-left : 200px ; }


そうすると、左側に余白が入った分、ボタンが右側に寄って、真ん中に見えるようになりました。

一見うまくいったように見えますよね!……ただ、これはパソコンだけでの話なんです。

でも……スマホで見ると!?

でもこれには問題点があるんです。それは……スマホ等、PC以外で見た時に真ん中に来ない!ということです。

なんでこんなことになるかと言うと、左側に200px分開けているからです（そのまんまッ!?）。スマホは横幅がパソコンのモニターに比べると断然狭いので、左に余白をちょっと入れただけでも、右の余白どころかボタンまで隠れてしまうんです。

どうしたらいいの!?

そこで、困りました。でも、答えはものすごく簡単でした。

<div><input type="submit" value="内容確認"></div>

こんな感じで、ボタンの周りを<div>で囲んでやって、その<div>にCSSで指定するんです。どんな指定かというと、単純に「真ん中揃え」の指定のみ!!

div { text-align : center ; }

たったこれだけで解決しました! スマホで見てもタブレットで見ても、必ず真ん中に表示されます。