Align text and image side by side at horizontally centered level

Question

I am trying to align horizontally text+image+text+image side by side. The below code works when all elements are text but with images in between I cannot get it right. Also, all text has to always centered at 50% of the height of the largest image in the row, like in below example img1. The width I set in my CSS, but the height is auto, so variable, so I dont know how to make the text positioned at 50% of the height of the largest image. How to do it?

 .merc { font-size:11px; font-weight:700; /*margin-left:10px;*/ color:#777 !important; display:inline-block; max-width:35% } .merc-image-two img { display:inline-block; max-width:25%; height:auto; padding-left:5px; } .merc-image img { display:inline-block; max-width:15%; height:auto; padding-left:5px; } #wrapper { max-width:100% } 

 <div id="wrapper"> <div class="merc"> MERC MERC MERC </div> <div class="merc-image"> <img alt="#" src= "http://lorempixel.com/50/50"></div> <div class="merc"> MERC MERC MERC </div> <div class="merc-image-two"> <img alt="#" src= "http://lorempixel.com/100/100"> </div> </div> 

Answer 1

Maybe so:

 .merc { font-size:11px; font-weight:700; /*margin-left:10px;*/ color:#777 !important; display:inline-block; vertical-align: middle; max-width:35% } .merc-image-two { display:inline-block; vertical-align: middle; max-width:25%; height:auto; padding-left:5px; } .merc-image { display:inline-block; vertical-align: middle; max-width:15%; height:auto; padding-left:5px; } #wrapper { max-width:100% } 

 <div id="wrapper"> <div class="merc"> MERC MERC MERC </div> <div class="merc-image"> <img alt="#" src= "http://lorempixel.com/50/50"></div> <div class="merc"> MERC MERC MERC </div> <div class="merc-image-two"> <img alt="#" src= "http://lorempixel.com/100/100"> </div> </div>