div 内的响应式垂直居中元素

Question

我需要垂直对齐 div 容器内的元素。元素如下图所示。使用这段代码，我能够很好地覆盖左侧的大图片，但文本和小图片仍然按照它的要求进行。我需要避免使用 flexbox，因为我还需要支持 IE8，或者至少支持 IE9。我已经找到了几种解决方案，也有表格或绝对位置，但我可能总是做错了......

谢谢你帮我解决这个问题:)

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>

div 内的响应式垂直居中元素

Responsive vertical center elements inside div

html

css

position