Image beside multiline text in 'vertical-align: middle' with fluid layout (Pure CSS from YUI)

Question

I want an image beside a multiline text (usually two lines) with vertical-align: middle.

When it's just one line, everything is ok with vertical-align: middle in the image style, but when the text has more than one line, the mess begins.

jsfiddle ==> http://jsfiddle.net/QZhG7/1/

Answer 1

I found the solution in this Stackoverflow question, but it needed some adjustments to work fine with Pure CSS in a fluid layout.

First, I needed to create a div around image.

.

Was this:

<img src="image.png">

Become this:

<div class="image"> <img src="image.png"> </div>

.

And CSS:

.pure-u-1-3 { 
    display: table-cell;
    vertical-align: middle;    
}
.image, span {
    display: table-cell;
    vertical-align: middle;
}
.image {
   width: 50px
}

Tha following code: .image { width: 50px } is needed because Pure CSS will "resize" the image to a smaller size. Remove this line and watch what happened in desktop/tablet version.

.

For the final result, visit jsfiddle ==> http://jsfiddle.net/QZhG7/3/

For more information, visit the original Stackoverflow question.