CODEWITHSUNDEEP
htmlcss
FlyingCat
FlyingCat

Reputation: 14260

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 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!

Upvotes: 1

Views: 71

Answers (2)

matewka
matewka

Reputation: 10148

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.

Upvotes: 0

Daniel Imms
Daniel Imms

Reputation: 50189

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

Upvotes: 1

Related Questions