Vertical align two images and some multiline text - html

Question

I'm trying to create in HTML a layout like in the image below:
I've a fixed image, (I know its size), then I need to place some multiline text, then another image, of variable size.
All the three elements should be aligned vertically i.e. the vertical centre of all them should be the same.
If it matters, this page should be shown on mobile devices.
I've checked all the related questions on stackoverflow, and tried all the possibilities I see, but with no luck.

Answer 1

You can use display table and play with it... not sure if you want the same layout on mobile, but you can do something like this:
<div class="content-wrapper">
<div class="col four">
<img src="http://lorempixel.com/100/100/" alt="">
</div>
<div class="col four">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
<div class="col four">
<img src="http://lorempixel.com/200/200/" alt="">
</div>
</div>
and the following css:
*{ box-sizing: border-box; }
.content-wrapper{
display-table;
max-width:800px;
}
.col{
display:table-cell;
vertical-align:middle;
padding:10px;
}
.four{
width: 33.33%
}
If you want a different layout on mobile you should problably change the display table to display relative and the with of each one of the col to 100%.
Check this example: https://jsfiddle.net/m8zqm4co/10/

Answer 2

You can do something slightly complicatedly simple for this:
.three-col {text-align: center; vertical-align: middle; display: table; width: 100%;}
.three-col .running-text {vertical-align: middle; display: table-cell; text-align: center;}
.three-col .running-text p {display: inline-block;}
<div class="three-col">
<div class="running-text">
<img src="http://placehold.it/100x100" alt="" class="fixed-img">
</div>
<div class="running-text">
<p>Poda Venna</p>
</div>
<div class="running-text">
<img src="http://placehold.it/200x200" alt="" class="fixed-img">
</div>
</div>
<div class="three-col">
<div class="running-text">
<img src="http://placehold.it/100x100" alt="" class="fixed-img">
</div>
<div class="running-text">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam modi cumque ratione voluptatem sunt voluptatibus veniam esse placeat amet labore cupiditate, mollitia eaque hic earum officia voluptatum et, obcaecati consequuntur.</p>
</div>
<div class="running-text">
<img src="http://placehold.it/200x200" alt="" class="fixed-img">
</div>
</div>

Answer 3

HTML, BODY{
height: 100%;
}
.wrap{
border: 1px solid red;
position: relative;
height: 100%;
}
.wrap img:nth-of-type(1), .wrap img:nth-of-type(2), .wrap p{
top: 50%;
transform: translateY(-50%);
position: relative;
}
.wrap img:nth-of-type(1){
position: absolute;
left: 10px;
}
.wrap img:nth-of-type(2){
display: inline-block;
vertical-align: middle;
width: 30%;
float: right;
}
.wrap p{
float: left;
width: 40%;
margin: 0 10px 0 25%;
text-align: center;
}
<div class="wrap">
<img src="http://lorempixel.com/100/100/nature/" alt="">
<img src="http://lorempixel.com/200/200/nature/" alt="">
<p>0s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially un</p>
</div>

Answer 4

Lets suppose you have a div where both images and the text goes inside it.
Try this out:
#container {
height: 300px;
line-height: 300px; /* same size as height */
display: inline-block;
}
.inner img{
display: inline-block;
vertical-align: middle;
}
<div id="container">
<div class="inner">
<img src="http://placehold.it/100x100">
Example Test
<img src="http://placehold.it/200x200">
</div>
</div>