Responsive vertical center elements inside div

问题

I need to verticaly align elements inside div container. Elements looks like on image below. With this code, I was able to nicely overwrap big picture on the left, but text and small picture still doing what it wants. I need to avoid flexbox, since I need to support also IE8, or atleast IE9. I've been trought several solutions, also with tables or absolute positions, but propably I've always did something wrong...

Thank you for helping me get of this :)

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;
}

回答1:

You're mixing block-level elements like h4 and inline like img and expecting them to align properly, possible but there's a simpler solution, add a third cell:

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

来源：https://stackoverflow.com/questions/40486156/responsive-vertical-center-elements-inside-div

标签

html

css

position