Отзывчивые элементы вертикального центра внутри 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>