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


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

Problem courtesy of: Kryptix


You could set it as a background image and center it there and then add a bit of left padding like this

Solution courtesy of: subhaze


I'm partial to absolute positioning.


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

nav > ul li:nth-child(2) a:before {
    position: absolute;
    top: 9px;
    left: -2px;
    content: url( " ";

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;


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


Discussion courtesy of: Wes Johnson

You could also put the image directly in the HTML and style it that way:

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:

Also here's a link on vertical-align: for other values.

Discussion courtesy of: user567665

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