html - html按钮中的中心图像

Question

我正在尝试显示一个简单的按钮，上面有一个图像，如下所示:

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

该按钮在 Chrome 中看起来是正确的，但在 Firefox 中有点偏离 — 它不是水平居中，而是向右倾斜。 FF截图如下。如何让图像居中(就像默认情况下在 Chrome 中一样)？我尝试向 img 添加边距:0，但无济于事。

Answer 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>