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

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

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

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