Использование изображений внутри элемента <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.
