Использование изображений внутри элемента <button>

Я пытаюсь включить изображение и текст внутри элемента кнопки. Мой код выглядит следующим образом:

<button class="testButton1"><img src="Car Blue.png" alt="">Car</button>

CSS:

.testButton1
{
font-size:100%;
height:10%;
     width: 25%
}

.testButton1 img
{
height:80%;
vertical-align:middle;
}

Что бы я хотел сделать, это поместить изображение в левый край кнопки и поместить текст либо в центр, либо вправо. Использование & nbsp работает, но, возможно, немного грубо. Я попытался окружить изображение и текст пробелами или div, а затем позиционировать их, но это, кажется, испортило вещи.

То, что, как представляется, происходит, заключается в том, что что-либо внутри тега кнопки (если не отформатировано) позиционируется как единое целое в центре более широкой кнопки (не заметно, если ширина кнопки остается автоматической, поскольку оба элемента являются побочными, сторона.

Любая помощь, как всегда, ценится. Спасибо.

Ответ 1

Подход фонового изображения

Вы можете использовать фоновое изображение и полностью контролировать позиционирование изображения.

Рабочий пример: http://jsfiddle.net/EFsU8/

BUTTON {
    padding: 8px 8px 8px 32px;
    font-family: Arial, Verdana;   
    background: #f0f0f0 url([url or base 64 data]);
    background-position: 8px 8px;
    background-repeat: no-repeat;
}

Немного "более красивый" пример: http://jsfiddle.net/kLXaj/1/

И еще один пример, показывающий настройки кнопки на основе состояний :hover и :active.

Подход детского элемента

Предыдущий пример будет работать с INPUT[type="button"], а также BUTTON. Тег BUTTON допускается содержать разметку и предназначен для ситуаций, требующих большей гибкости. После повторного чтения исходного вопроса, еще несколько примеров: http://jsfiddle.net/kLXaj/5/

Этот подход автоматически сохраняет изображение/текст в зависимости от размера кнопки и обеспечивает больший контроль над внутренним расположением кнопки.

Ответ 2

Измените стиль отображения кнопки на встроенный блок, img float налево. При необходимости добавьте маржу в img.

<button style="display:inline-block">
  <img src="url" style="float:left;margin-right:0.5em">Caption
</button>

Ответ 3

Если вы хотите использовать изображение внутри кнопки не в CSS, я думаю, что это поможет вам:

http://jsfiddle.net/FaNpG/1/

Ответ 4

Добавление float влево к изображению работает до некоторой степени. Разумное использование отступов и размеров изображений устраняет проблему, когда текст застрял в верхней части кнопки. Смотрите jsFiddle.