Centering issue with <p> tag

Question

I have a img and a p inside of a div.

I am trying to center the p vertically. I have tried line-height and a few other things.

Here is what it looks like

I would like "cute firefox prank" to be centered vertically relative to the img

CSS

img{
    width: 50px;
    height: 50px;
}

li{
    list-style-type: none;
    text-decoration: none;
}

a{
    text-decoration: none;
}

li p{
    display: inline;
    color: black;
    font-size: 25px;
    margin:0;
}

DEMO fiddle.

Answer 1

Done.

Updated jsFiddle

All you have to do is add vertical-align:middle; to the img.

img {
    vertical-align:middle;
}

Answer 2

Add vertical-align:middle; to your img rules. See http://jsfiddle.net/hA9N2/4/ for a working example.

Answer 3

I am not sure why p has been set to inline; however, since img is an inline tag, you can use vertical-align to align it against other inline content.

I went ahead and made p a block element again, put the image inside it, and made the image vertically aligned.

JSFiddle here.

If you want to keep the p inline, then all you really need to do is set the image to be vertically aligned since p is set to inline as well.

JSFiddle here.

Answer 4

Try this, http://jsfiddle.net/gBNFK/1/

 li p{
        /* Add this */
        line-height: 42px;
        display: inline-table;
        vertical-align: top;
        /* Add this */
        color: black;
        font-size: 25px;
        margin:0;
    }