Center image in html button - html

Question

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.

Answer 1

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/
.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

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%);
}
http://jsfiddle.net/QgTkt/292/

Answer 3

Set the image as background image of the button.
<button class="enjoyable"></button>
.enjoyable {
background-image: url("./icon.png");
background-position: center;
background-repeat: no-repeat;
background-size: contain;
}
Demo: http://jsfiddle.net/x7j4o0uh/1/

Answer 4

I threw this together pretty quickly, so it still needs some tweaking, but you can give this a shot... http://jsfiddle.net/GGXaP/3/
This script (using jQuery) handles the user interaction by adding/removing CSS classes as needed:
(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.

Answer 5

To solve this issue on Chrome I just added align-items : center on my button.
By default Chrome sets align-items : flex-start on 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.

Answer 6

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>

Answer 7

button {
display: grid;
align-items: center;
}
Inspiration: [1]