Question

I am trying to include an image and some text inside a button element. My code is as follows:

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

The CSS is:

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

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

What I would like to do is to position the image to the left edge of the button, and position the text either in the center or to the right. Using &nbsp works, but is perhaps a bit crude. I have tried to surround the image and text with spans or divs and then positioning those, but that seems to mess things up.

What appears to be happening is that anything inside the button tag (unless formatted) is positioned as one unit in the center of a wider button (not noticeable if button width is left to auto adjust as both items are side-by-side.

Any help, as always, is appreciated. Thank you.

Answer 1

Background Image Approach

You can use a background image and have full control over the image positioning.

Working example: 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;
}​

A slightly “prettier” example: http://jsfiddle.net/kLXaj/1/

And another example showing adjustments to the button based on the :hover and :active states.

Child Element Approach

The previous example would work with an INPUT[type="button"] as well as BUTTON. The BUTTON tag is allowed to contain markup and is intended for situations which require greater flexibility. After re-reading the original question, here are several more examples: http://jsfiddle.net/kLXaj/5/

This approach automatically repositions image/text based on the size of the button and provides more control over the internal layout of the button.