[ HTML ] ボタンの幅や高さの設定と、中央揃えする方法

ボタンの幅と高さの変更方法と、中央に配置するサンプルコードを掲載します。実際のボタンがどのように表示されるかも実際に表示させていますので、ご確認ください。 なお、ボタンに限らずその他の要素にも応用が利くと思います。いい加減なこと言ってるような気もしますが。。。

ボタンのサイズを親要素の横幅に対して比率で指定する方法

<div>
 <input type="button" style="width:90%;" value="親要素に対して比率で設定">
</div>

 

パディングを入れてボタンの高さを変更する

<div>
   <input type="button" style="width: 90%; padding: 10px;" value="高さを変える" />
</div>

 

ボタンの文字の大きさを変更する

<div>
 <input type="button" style="width:90%;padding:10px;font-size:30px;" value="文字を大きくする" />
 </div>

 

ボタンの親要素の中央に配置する

<div style="margin-left:10%;margin-right:10%;">
 <input type="button" style="width:100%;padding:10px;font-size:30px;" value="中央に配置" />
 </div>

 

ボタンの幅を100%にしている点がポイントです。そうしないと、マージンを取ったうえで横幅の比率が設定され、 中央揃えにはならないのです。