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;
}