在水平居中的水平上并排对齐文本和图像

Question

我正在尝试水平对齐文本+图像+文本+图像。 下面的代码适用于所有元素都是文本，但中间有图像我无法正确使用。 此外，所有文本必须始终以行中最大图像高度的50％为中心，如下面的示例img1。我在CSS中设置的宽度，但高度是自动的，因此可变，所以我不知道如何使文本定位在最大图像高度的50％。怎么做？

.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

也许是这样：

＆＃13;

＆＃13;

.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%
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;