CODEWITHSUNDEEP
htmlcss
Adam Rackis
Adam Rackis

Reputation: 83358

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

Upvotes: 20

Views: 70924

Answers (8)

Dino Craftsman
Dino Craftsman

Reputation: 1

the right and bottom try different percentages until your image is centered

button position: relative;

button img position: absolute; right:()% bottom()%

Upvotes: 0

Gabriel Arghire
Gabriel Arghire

Reputation: 2360

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

Inspiration: [1]

Upvotes: 0

Nightfall
Nightfall

Reputation: 127

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/

Upvotes: 5

Dutchie432
Dutchie432

Reputation: 29160

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>

Upvotes: 27

Pascal Goldbach
Pascal Goldbach

Reputation: 1007

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.

Upvotes: 1

max li
max li

Reputation: 2457

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/

Upvotes: 7

Rajiv
Rajiv

Reputation: 1295

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>

Upvotes: 0

FlyingDeveloper
FlyingDeveloper

Reputation: 342

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.

Upvotes: 1

Related Questions