如何垂直对齐我的图像和文本

Question

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 have my text to be like

               --
text here     |  |
               --

http://jsfiddle.net/wjPxS/

I can't really change my image float right in css. Can anyone help me about it? Thanks so much!

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

Answer 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.