☰

HTMLボタンの中央に画像を配置する 質問する

tag-icon • tag-icon html css
HTMLボタンの中央に画像を配置する 質問する

次のように、画像付きのシンプルなボタンを表示しようとしています。

<button type="button" style="width: 23px; height: 23px; padding:0">
    <img src="Icon_304.png" />
</button>

ボタンは Chrome では正しく表示されますが、Firefox では少しずれています。水平方向の中央ではなく、右に傾いています。以下は FF のスクリーンショットです。画像を中央に配置するにはどうすればよいでしょうか (Chrome のデフォルトのように)? img に margin: 0 を追加してみましたが、効果はありませんでした。

FFイメージ

ベストアンサー1

これを行う最善の方法は、ボタンのサイズを設定するのではなく、単にパディングに頼ることです。当然、次に示すように、これらのスタイルをスタイル シートに配置する必要があります。

デモ：http://jsfiddle.net/QgTkt/4/

.tallButton {
  padding: 50px 10px;
}

.wideButton {
  padding: 10px 50px;
}

.equalButton {
  padding: 10px;
}
<button type="button" class="equalButton">
        <img src="http://dummyimage.com/32x32/ff0/000">
    </button>

<br /><br /><br />

<button type="button" class="wideButton">
        <img src="http://dummyimage.com/32x32/ff0/000">
    </button>

<br /><br /><br />

<button type="button" class="tallButton">
        <img src="http://dummyimage.com/32x32/ff0/000">
    </button>

おすすめ記事