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

Question

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

<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 работает, но, возможно, немного грубо. Я попытался окружить изображение и текст интервалами или делителями, а затем расположить их, но это, кажется, испортило все.

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

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

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

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

Answer 2

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

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

Answer 3

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

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

Answer 4

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