将文本和图像并排排列在水平居中水平

Question

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

.merc { 
 
\t font-size:11px; 
 
\t font-weight:700; 
 
\t /*margin-left:10px;*/ 
 
\t color:#777 !important; 
 
\t display:inline-block; 
 
\t max-width:35% 
 
} 
 

 
.merc-image-two img { 
 
\t display:inline-block; 
 
\t max-width:25%; 
 
\t height:auto; 
 
\t padding-left:5px; 
 
} 
 

 
.merc-image img { 
 
\t display:inline-block; 
 
\t max-width:15%; 
 
\t height:auto; 
 
\t padding-left:5px; 
 
} 
 

 
#wrapper { 
 
\t max-width:100% 
 
}

<div id="wrapper"> 
 
\t \t \t <div class="merc"> 
 
        MERC MERC MERC 
 
       </div> 
 
          <div class="merc-image"> 
 
\t \t \t \t \t \t \t <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> 
 
\t \t \t \t </div>

Answer 1

也许是这样的：

.merc { 
 
\t font-size:11px; 
 
\t font-weight:700; 
 
\t /*margin-left:10px;*/ 
 
\t color:#777 !important; 
 
\t display:inline-block; 
 
    vertical-align: middle; 
 
\t max-width:35% 
 
} 
 

 
.merc-image-two { 
 
\t display:inline-block; 
 
    vertical-align: middle; 
 
\t max-width:25%; 
 
\t height:auto; 
 
\t padding-left:5px; 
 
} 
 

 
.merc-image { 
 
\t display:inline-block; 
 
    vertical-align: middle; 
 
\t max-width:15%; 
 
\t height:auto; 
 
\t padding-left:5px; 
 
} 
 

 
#wrapper { 
 
\t max-width:100% 
 
}

<div id="wrapper"> 
 
\t \t \t <div class="merc"> 
 
        MERC MERC MERC 
 
       </div> 
 
          <div class="merc-image"> 
 
\t \t \t \t \t \t \t <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> 
 
\t \t \t \t </div>