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>

The button looks right in Chrome, but is off a 开发者_如何学Pythonbit 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.

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>

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/

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/

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.

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.

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>

button {
  display: grid;
  align-items: center;
}

Inspiration: [1]