Align text and image side by side at horizontally centered level

1
votes

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?

IMG1

.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>
1
htmlcss

1 Answers

0
votes

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>