Изображение центра в html-кнопке

Я пытаюсь показать простую кнопку с изображением на ней, например:

<button type="button" style="width: 23px; height: 23px; padding:0">
    <img src="Icon_304.png" />
</button>

Кнопка выглядит правильно в Chrome, но немного отключена в Firefox - она не имеет горизонтальной ориентации, а перекошена вправо. Ниже приведен скриншот FF. Как я могу получить изображение в центре (как в Chrome по умолчанию)? Я попытался добавить маржу: 0 в img, но безрезультатно.

Ответ 1

Лучший способ сделать это - не устанавливать размеры кнопки, а просто положиться на отступы. Очевидно, вы должны поместить эти стили в таблицу стилей, как показано ниже.

ДЕМО: 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>

Ответ 2

Вы также можете установить абсолютное положение для изображения и отрицательного перевода, таким образом, вы можете установить любой размер кнопки, не изменяя снова заполнение.

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

Ответ 3

Я собрал это довольно быстро, так что он все еще нуждается в некоторой настройке, но вы можете дать этот снимок... http://jsfiddle.net/GGXaP/3/

Этот script (с использованием 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));

Тогда это просто вопрос настройки CSS, чтобы кнопка выглядела так, как вам нравится. Один в моем примере довольно грубый (я "делаю его работающим" парнем - не "сделай это красивым" парнем), но это начало.

Ответ 4

Вместо того, чтобы указывать высоту или ширину на кнопку или изображение, добавьте кнопку, чтобы она выравнивала это изображение с центром

<button type="button" style="padding:10px">
    <img src="test/images/searchIcon.png">
</button>

Ответ 5

Чтобы решить эту проблему в Chrome, я просто добавил align-items : center на свою кнопку.

По умолчанию Chrome устанавливает align-items : flex-start на всех кнопках, что выравнивает все элементы внутри кнопки с левой стороны, перегружая это свойство, изображение внутри моей кнопки теперь центрируется.

Ответ 6

Установите изображение в качестве фонового изображения кнопки.

<button id='enjoyable'></button>

#enjoyable{
background-image: url("icon");
background-position: 50%, 50%;
}