CSS vertical align based on height of other element - html

Question

I'm trying to create a block with an image that contains content by your side, where I intend to align the image vertically based on the content's height. I've tried alignments with table/table-cell technique but I can't get what I want..
click here to see what I want:

Answer 1

You can solve this with flex-box, here is one way to do it:
body
{
padding: 20px 0;
}
.gallery-item
{
background-color: gray;
display: flex;
margin-bottom: 60px;
}
.gallery-item
{
flex: 1 0 auto;
}
.gallery-item .image-container
{
position: relative;
flex: 0 0 auto;
align-self: center;
}
.gallery-item .image-container img
{
margin: -20px auto;
}
.gallery-item .text-container
{
padding: 10px;
}
<div class="gallery-item">
<div class="image-container">
<img src="http://www.placehold.it/200x200">
</div>
<div class="text-container">
<p>Text</p>
</div>
</div>
<div class="gallery-item">
<div class="image-container">
<img src="http://www.placehold.it/200x200">
</div>
<div class="text-container">
<p>Text</p><p>Text</p><p>Text</p><p>Text</p><p>Text</p><p>Text</p><p>Text</p><p>Text</p>
</div>
</div>
And here is a codePen: http://codepen.io/anon/pen/xGdGPV
A lot of the code is not mandatory, like the margins for .gallery-item and the padding for the body, but you get the idea.

Answer 2

This solve my question without using flex-box, I need it works in old browsers
.container {
position: relative;
background:#eee;
padding: 20px 20px 20px 450px;
}
img {
position:absolute;
left:0;
top:50%;
margin-top:-100px;
}

Answer 3

the first thing you have to do is put display: table to de container and display:table-cell; vertical-align:middle to lements inside the container.