CSS vertical alignment based on the height of another element

Question

I’m trying to create a block that contains an image with content on the side, where I want the image to be aligned to the center based on the height of the content. I leave here a scheme of what I want. I’ve tried alignments turning the container into table but I can’t get what I want.

Answer 1

I suggest applying flex on the father div, but it does not support old browsers... However, if you put part of the CSS you can better know if there are other outputs to the and problem.

display: flex; flex-wrap: wrap; flex-direction: row; justify-content: space-around;

Source: css-Tricks.

OBS. It was not very clear to me if the result you want is the first or the second image, if it is the second image maybe my suggestion will help...

Answer 2

taking into account that the image size is known, using absolute positioning on the image and negative margins:

example: http://codepen.io/cmpscabral/pen/wadaqX

.container {
    position: relative;
    background:#eee;
    padding: 20px 20px 20px 450px;

    img {
      position:absolute;
      left:0;
      top:50%;
      margin-top:-100px;
    }
}