Vertically positioning pseudo image element (CSS)

I am 开发者_Python百科using a :before pseudo element to add a small image to a download link on my site. The height of the image is greater than the line height and the bottom of the image aligns with the bottom of the text.

How can I alter the vertical alignment of the pseudo element? Ideally so the center of the image aligns with the center of the text?

I find that this works in most cases, as long as the text and image aren't way out in scale:

#elem:before
{
    content: url(image.png);
    position: relative;
    bottom: -.5ex;
    margin-right: .5em;
}

The margin-right puts a little bit of space between the image and the text.

Make image inline elment, set line hegth to it and set vertical allign to container.

I couldn't find an elegant solution. Here is a jsFiddle with a working solution:

http://jsfiddle.net/rcravens/pAcDE/

Given the following element:

<div id='elem'>Bob Cravens</div>

I have this CSS:

#elem:before{
    content: '';
    height: 160px;
    width: 136px;
    background: url('http://bobcravens.com/Content/images/author_thumb.png');
    position: absolute;
    top: 0px;
    left: 0px;
}
#elem{
    background-color: red;
    margin: 60px 136px;
}

The :before is probably what you have except for the 'position: absolute' style. Then I used a margin to offset the original div.

Hope this helps.

Bob