How To Vertical Align My Images And Texts

I am trying to do a vertical align for my texts and images. It seems the texts are aligned to top in my jsfiddle text here -- | | -- I want to h

Solution 1:

Seeing as you know the height of your container you can just set the line-height the same as height to vertically align the text.

Demo

.div1 {
    height: 20px;
    line-height:20px;
}

Solution 2:

updated jsFiddle

You need to apply

display: inline-block;
vertical-align: middle;

to both img and span. In jsfiddle I replaced span with `div'.

Though, this doesn't let you float the img to the right.