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>