I'm trying to create a block containing an image with content next to it, where I want the image to be center-aligned based on the height of the content. I leave here a scheme of what I intend. I have tried alignments by rendering the container into a table but I can not get what I want.
Considering that image size is known, using absolute image positioning and negative margins:
example: link
.container {
position: relative;
background:#eee;
padding: 20px 20px 20px 450px;
img {
position:absolute;
left:0;
top:50%;
margin-top:-100px;
}
}
I suggest applying flex in the parent div, but it does not support old browsers ... However if you put part of the CSS you can know better if there are other exits to the 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 second image, if it is the second image maybe my suggestion will help ...