html按钮中的中心图像

Question

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

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

该按钮在Chrome中看起来正确，但在Firefox中有点偏离 - 它不是水平居中，而是偏向右侧。 FF屏幕截图如下。如何让图像居中（就像默认情况下在Chrome中一样）？我尝试添加一个保证金：0到img，但无济于事。

Answer 1

执行此操作的最佳方法是不设置按钮的尺寸，而是简单地依靠填充。显然，您应该将这些样式放入样式表中，如下所示。

DEMO：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>

Answer 2

您还可以设置图像的绝对位置和负转换，这样您就可以设置任意大小的按钮而无需再次更改填充。

.tallButton{
   position:relative;
   width:200px;
   height:200px;
}

.tallButton img {
  position:absolute;
  top: 50%;
  left:50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

http://jsfiddle.net/QgTkt/292/

Answer 3

我很快把它扔到一起，所以它仍然需要一些调整，但你可以试一试...... http://jsfiddle.net/GGXaP/3/

此脚本（使用jQuery）通过根据需要添加/删除CSS类来处理用户交互：

(function($) {

    $(document).ready(function() {
        $('.imageButton').hover(function() {
            $(this).addClass('hover');
        }, function() {
            $(this).removeClass('hover');
        });

        $('.imageButton').mousedown(function() {
                $(this).addClass('mouseDown');
        });
        $('.imageButton').mouseup(function() {
                $(this).removeClass('mouseDown');
        });
    });
}(jQuery));

然后，只需设置CSS即可使按钮看起来像你喜欢的样子。我的例子中的一个非常粗糙（我是一个“让它工作”的人 - 而不是“让它变得漂亮”的人），但这是一个开始。

Answer 4

不是给按钮或图像赋予高度或宽度，而是给按钮添加填充，以便将图像对齐到中心

<button type="button" style="padding:10px">
    <img src="test/images/searchIcon.png">
</button>

Answer 5

要在Chrome上解决此问题，我刚刚在我的按钮上添加了align-items : center。

默认情况下，Chrome会在所有按钮上设置align-items : flex-start，这会按住左侧按钮内的所有元素，通过重载此属性，我的按钮内的图片现在居中。

Answer 6

将图像设置为按钮的背景图像。

<button id='enjoyable'></button>

#enjoyable{
background-image: url("icon");
background-position: 50%, 50%;
}