在 html 按钮中居中图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7274875/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Center image in html button
提问by Adam Rackis
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>
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.
该按钮在 Chrome 中看起来是正确的，但在 Firefox 中有点偏离——它不是水平居中，而是向右倾斜。FF 屏幕截图如下。如何使图像居中（就像默认情况下在 Chrome 中一样）？我尝试向 img 添加边距：0，但无济于事。
回答by Dutchie432
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.
最好的方法不是设置按钮的尺寸，而是简单地依赖填充。显然，您应该将这些样式放入样式表中，如下所示。
DEMO: http://jsfiddle.net/QgTkt/4/
演示：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>回答by max li
You can also set absolute position for the image and negative translate, this way you are able to set any size of the button without changing the padding again.
您还可以设置图像的绝对位置和负平移，这样您就可以设置任何大小的按钮而无需再次更改填充。
.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%);
}
回答by FlyingDeveloper
I threw this together pretty quickly, so it still needs some tweaking, but you can give this a shot... http://jsfiddle.net/GGXaP/3/
我很快就把它放在一起，所以它仍然需要一些调整，但你可以试一试...... http://jsfiddle.net/GGXaP/3/
This script (using jQuery) handles the user interaction by adding/removing CSS classes as needed:
此脚本（使用 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));
Then it's just a matter of setting up CSS to make the button look the way you like. The one in my example is pretty rough (I'm a "make it work" guy - not a "make it pretty" guy), but it's a start.
然后只需设置 CSS 以使按钮看起来像您喜欢的样子即可。我的例子中的那个非常粗糙（我是一个“让它工作”的人 - 不是一个“让它变得漂亮”的人），但这是一个开始。
回答by Rajiv
Instead of giving height or width to button or image give padding to button so it will align that image to center
不是为按钮或图像提供高度或宽度，而是为按钮提供填充，这样它就会将该图像与中心对齐
<button type="button" style="padding:10px">
<img src="test/images/searchIcon.png">
</button>
回答by Pascal Goldbach
To solve this issue on Chrome I just added align-items : centeron my button.
为了在 Chrome 上解决这个问题，我刚刚添加align-items : center了我的按钮。
By default Chrome sets align-items : flex-starton all buttons, which aligns all elements inside the button on the left side, by overloading this property the picture inside my button is now centered.
默认情况下，Chrome 设置align-items : flex-start在所有按钮上，将左侧按钮内的所有元素对齐，通过重载此属性，我的按钮内的图片现在居中。
回答by SwatDoge
Set the image as background image of the button.
将图像设置为按钮的背景图像。
<button id='enjoyable'></button>
#enjoyable{
background-image: url("icon");
background-position: 50%, 50%;
}
