Question

I really would like to do something like this…it’s for when I have text with icons on the left:

I tried (unsuccessfully) to do something along the lines of:

    <a href="#" class="icon">Text centered vertically in relation 
to the background image</a>

CSS

a.icon {
background: url(image.png) 0 50%;
margin-top: -5%;
min-height: the-height-of-my-image-plus-the-negative-margin;
}

Answer 1

Give line-height same as height of your a tag. Like this:

a.icon {
background: url(image.png) 0 50%;
margin-top: -5%;
height:40px;
line-height:40px;
text-align:center;
}