Vertically center responsive image in responsive div with CSS

Question

EDIT - As requested here's the Fiddle jsfiddle.net/daghene/eq4tfzLn/

I've already searched a lot on Stackoverflow and Google to find an answer to this but even if there's plenty I don't know why they're not working nor if I'm handling this layout correctly.

Basically I'm using Skeleton responsive framework to make a one-page layout and I have a section where there's a row with this image on the left and text on its right. Below it there's a small twitter paragraph with the latest news.

Basically my problem is: when the first row gets too small and the text starts getting long the image gets way too small and I thought the best solution is to vertically center it, but both it and the div's height are responsive(most solutions requires at least one of the two to be fixed height).

What's your suggestion and far more importantly am I handling this layout well on a logical perspective or is it ok to have paragraphs get THAT long with the image simply sticking to the top?

Note that it displays fine on desktop, tablet and smartphones, there's just that little part where it gets kinda weird...here's the screenshot of how my layout is acting, the third one being the one that I think should be fixed since it's kinda ugly to look at and maybe centering the image would help.

P.s. one thing I forgot, haven't put my code since Skeleton, as most responsive Frameworks, simply requires a .container class with .row and .X columns inside it to give the divs size and centering and I didn't add anything on top of that yet. The only thing I think I'll do is put the sections in a fixed height's div because I plan on making the user scroll them as slides and they'll always need to be 100% viewport height or at least a fixed height like say 600px scaling.

P.s.2 if the only solution is js since we don't know the paragraph's and img's height at all times go ahead and propose a solution, I'm asking if this could be done with CSS since I'm not that good at js yet.

Answer 1

I would give the thanksup row an id - eg vertical and then you can use the following styles to achieve vertical alignment:

#vertical {
    display:table;
    width:100%;
}
#vertical > .columns {
    float:none;
    display:table-cell;
    vertical-align:middle
}
@media (max-width: 565px) {
  #vertical  > .columns {
    display: block;
}

Updated fiddle