Adam Rackis Adam Rackis - 3 months ago 8
CSS Question

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

FF Image

Answer

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/

HTML

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

CSS

.tallButton{
    padding:50px 10px;
}
.wideButton{
    padding:10px 50px;
}
.equalButton{
    padding:10px;
}