在水平居中的水平上並排對齊文本和圖像

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

可能是這樣：

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