How to center text with a background image

Question

I really would like to do something like this ... this is when I have text with icons on the left:

I tried (unsuccessfully) to do something line by line:

<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 the same as the height your a tag. Like this:

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

Answer 2

 a.icon { background: url(image.png) 0 50%; padding: ?px ?px } 

Adjust indentation? px

Answer 3

I cannot come up with the perfect solution, but the following code may work. However, it violates the specification of bindings, and this is a very bad practice.

CSS

 <style type="text/css"> .fixinline { display: inline-block; } .icon { background: red url(http://goo.gl/12gdn) no-repeat left center; height: 135px; /* >= image height */ display: table; padding: 0 0 0 135px; /* >= image height */ } .icon span { display: table-cell; background-color: yellow; vertical-align: middle; } </style> 

HTML

 <span class="fixinline"><a class="icon"><span>hello<br>there</span></a></span> 

jsFiddle Demo