Question

I am trying to vertically center an image and text. Here is the code I have in a wokring jsfiddle http://jsfiddle.net/4a9XX/ as you can see the text is lower than the image how can I bring them to be level?

CSS

#display {
position:fixed !important;
bottom:0;
z-index:999;
background-color:#D41924;
width:100%;
padding:5px;
color:#FFF;
font-weight:bold;
vertical-align:middle;
}

HTML

<div id="display"><img src="http://i46.tinypic.com/2jd4due.gif" /> SOME TEXT </div>

Answer 1

Use this (vertical-align):

​#display img, #display span {vertical-align: middle;}​'

And Enclose the text inside the <span> tags.

Updated Fiddle: http://jsfiddle.net/4a9XX/10/