buttonの中央寄せについて考えた

 ウェブページに欠かせないボタン.なにかとあればボタンで考えがちなきょうこの頃.
 HTMLには2種類のボタンがある.buttonタグとinput type=”button”である.これらはしばしば中央に寄せたくなる.検索してみると,次のようにするとよいと書かれている.

divで囲い,divに text-align:center; とスタイリングする.

 もちろんこれで実現できるのだから有無をいわせない.すばらしい記事である.もう数えきれない開発者たちがこの記事のとおりdivでbuttonをラップしてインライン要素のセンタリングを紐づけてきた.

 ここでなぜdivを増やさなければ実装できないままなのだろうという疑問がわく.

buttonに直接text-align:center;を紐づければよいではないか.

 しかし,W3Cがそう策定しない正当な理由がある.
 そもそもbuttonは次のように使うことが多い.

・異なるページへリンクするとき
・データを送信するとき
・切り替えるとき

 つまり,buttonそれ自体では,これといって機能を持てず,ぺこぺこと押すだけの要素だ.buttonは他のタグによって機能を加えられて初めて有用な部品になる.
 この「加える」という操作には,タグをタグでラップすることが必要だ.リンクさせるならaタグで,送信するならformタグで,切り替えるならJavaScriptなどでイベントを書くのが一般的である.
 よって,buttonを使うときはほぼ必ず,別のタグでラップする.

 ここで当初の疑問に戻ってみる.

なぜbuttonを中央寄せにするにはdivタグで囲わなければならないのか.

 次のような答えが導ける.

aタグやformタグにtext-align:center;を紐づければよいのではないか.

 やってみる.

<form action="#" class="button_form_center">
 <input type="button" value="中央に来るformボタン">
</form>
<a href="#" class="button_a_center">
 <button>中央に来るaボタン</button>
</a>

 CSSは以下のとおり.
.button_form_center{ text-align: center; }
.button_a_center{ text-align: center; display: block;}

 


 

 上記でbuttonはいずれも中央に来る.aタグではdisplay:block;にしなければならなかったが,formタグではtext-align:center;のみで中央に来た.
 以上から,divタグで囲わなくても,aタグやformタグにスタイルを紐づければよいことがわかった.divの増殖を抑えることができそうだ.