I am trying to include an image and some text inside a button element. My code is as follows:
<button><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   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.
4 Answers
Background Image Approach
You can use a background image and have full control over the image positioning.
Working example:
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:
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:
This approach automatically repositions image/text based on the size of the button and provides more control over the internal layout of the button.
4Change button display style to inline-block, img float to left. Add margin to img as necessary.
<button> <img src="url">Caption
</button>If you want to use image inside the button not in the CSS I think this help you:
1Adding float left to the image works to an extent. A judicious use of padding and image sizing fixes the issue with having the text stuck to the top of the button. See this jsFiddle.
