html按钮中的中心图片 [英] Center image in html button

问题描述

我试图显示一个简单的按钮，上面有一个图像，像这样:

I'm trying to show a simple button, with an image on it, like this:

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

该按钮在Chrome中看起来正确，但在Firefox中则略有偏离-它不是水平居中，而是向右倾斜. FF屏幕截图如下.如何获得图像居中的位置(默认情况下是在Chrome中)?我尝试为img添加一个边距:0，无济于事.

The button looks right in Chrome, but is off a bit in Firefox—it's not horizontally centered, but skewed to the right. A FF screenshot is below. How can I get the image to be centered (like it is in Chrome by default)? I tried adding a margin: 0 to the img, to no avail.

推荐答案

做到这一点的最佳方法不是设置按钮的尺寸，而只是依靠填充.显然，您应该将这些样式放入样式表中，如下所示.

The best way to do this is not to set the dimensions of the button, but to simply rely on padding. Obviously you should put these styles into a style sheet, as shown below.

演示: 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>

这篇关于html按钮中的中心图片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！