div中的響應垂直中心元素

Question

我需要垂直對齊div容器內的元素。元素如下圖所示。 通過此代碼，我可以很好地包裝左側的大圖，但文字和小圖片仍然按照自己的意願進行。 我需要避免flexbox，因爲我需要支持IE8或至少IE9。 我一直trought幾種解決方案，還與表或絕對位置，但propably我總是做錯了什麼......

謝謝你幫我弄的這個:)

HTML

<section class="contact"> 
     <div class="adress"> 
      <h4>abc</h4> 
      <span>acbd<br> 
      efgh</span> 
      <span>tyre<br> 
      asdsad<br> 
      cxzcasd</span> 
      <img src="img/ccc-map.png" alt="map-ccc"> 
     </div> 
     <div class="map"> 
      <img src="img/ccc-g-map.png" alt="google-map"> 
     </div> 
    </section> 

SCSS

.contact { 
    border: 1.5px solid $grey; 
    width: 100%; 

    .adress { 
     float: left; 
     width: 40%; 
     padding: 2%; 

     h4 { 
      font-size: 130%; 
     } 

     span { 
      font-size: 100%; 
     } 

     img { 
      width: 45%; 
      height: auto; 
     } 
    } 
    .map { 
     float: right; 
     width: 60%; 
     padding: 1%; 

     img { 
      width: 100%; 
      height: auto; 
     } 
    } 
} 
.contact::after { 
    content: " "; 
    display: table; 
    clear: both; 
} 

Answer 1

你混合塊級元素，如h4和內聯像img，並期待他們正確對齊，可能的，但有一個簡單的解決方案，增加第三單元：

.contact{ 
 
    display: table; 
 
    width: 100%; 
 
    border-collapse: collapse; 
 
    border: 2px solid #ddd; 
 
} 
 
.contact > div{ 
 
    display: table-cell; 
 
    vertical-align:middle; 
 
    padding:8px; 
 
} 
 
.contact img{ 
 
    vertical-align: middle; 
 
    width: 100%; 
 
} 
 
.pic{ 
 
    width: 100px; 
 
} 
 
.map{ 
 
    width: 60%; 
 
}

<section class="contact"> 
 
    
 
    <!-- Create three cells instead! --> 
 
    
 
    <div class="adress"> 
 
    <h4>abc</h4> 
 
    <span> 
 
     acbd<br> 
 
     efgh 
 
    </span> 
 
    <span> 
 
     tyre<br> 
 
     asdsad<br> 
 
     cxzcasd 
 
    </span> 
 
    </div> 
 
    
 
    <div class="pic"> 
 
    <img src="//placehold.it/100x100/fac" alt="map-ccc"> 
 
    </div> 
 
    
 
    <div class="map"> 
 
    <img src="//placehold.it/500x300/fac" alt="google-map"> 
 
    </div> 
 
    
 
</section>