Question

For example: http://jsfiddle.net/S23ut/1/

I would like the image and the text to be vertically align to the middle of its container. I can’t seem to get the CSS right for this. Any ideas/tricks?

Answer 1

I’m not sure about cross-browser compatibility, but using the CSS display: table-XXX might work:

#offer_widget .row {
    display: table-row;
}

#offer_widget .row_image {
    display: table-cell;
    text-align:center;
    vertical-align: middle;
}
#offer_widget .row_text {
    display: table-cell;
    vertical-align: middle;
}

See this update to your jsFiddle.