How do you vertically align text to the middle of an image?

Problem

Please look at the following jsFiddle and alter appropriately. I basically want the text to be perfectly in the middle of the images height.

http://jsfiddle.net/e7AV9/1/

Problem courtesy of: Kryptix

Solution

You could set it as a background image and center it there and then add a bit of left padding like this http://jsfiddle.net/e7AV9/5/

Solution courtesy of: subhaze

Discussion

I'm partial to absolute positioning.

CSS

* {
    font-family: Verdana;
    font-size: 10px;
}

nav > ul li:nth-child(2) a:before {
    position: absolute;
    top: 9px;
    left: -2px;
    content: url(http://s2.postimage.org/1waex5o10/9j41t1.png) " ";
}

nav a {
    color: #626262;
    padding: 10px;
    margin-left: 10px;
    margin-right: 10px;
    width: 150px;
    display: inline-block;
}

nav ul li {
    position: relative;
    display: inline-block;
    list-style: none;
}

HTML

<nav>
    <ul>
        <li><a href="index.php">Home</a></li>
        <li><a href="forum.php">Community</a></li>
    </ul>
</nav>

‚Äč

Discussion courtesy of: Wes Johnson

You could also put the image directly in the HTML and style it that way: http://jsfiddle.net/e7AV9/10/

Here's the problem with CSS:content:

I feel that we shouldn't use the content declaration at all. It adds content to the page, and CSS is meant for adding presentation to the page, and not content. Therefore I feel that you should use JavaScript if you want to dynamically generate content. CSS is the wrong tool for this job.

Discussion courtesy of: skibulk

Another solution can be just to add vertical-align: top such as this example: http://jsfiddle.net/Vh6wP/.

Also here's a link on vertical-align: http://css-tricks.com/what-is-vertical-align/ for other values.

Discussion courtesy of: user567665

This recipe can be found in it's original form on Stack Over Flow.