Question

I’m having a little difficulty getting the icon image to align properly in my button. If you go to http://jsfiddle.net/Vw9Z6/7/ , you will notice the icon floats higher than the word “Continue”. I want the icon and the word “Continue” to be on the same line. I can futz around with margin-top to get it working, but in my opinion, it may not be reliable depending on the user screen resolution.

Any idea on how I might go about solving this?

Thanks much.

Answer 1

Replace your .my-button-icon with the following:

.my-button-icon {
    margin-left:10px;
    display: inline-block;
}

The float: right; was messing the alignment up: http://jsfiddle.net/Vw9Z6/11/

Update:

You may want to play around with vertical-align: middle; as well. I think at the current text size the alignment looks better without the vertical-align style, but this could change with increasing/decreasing font.