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

您正在混合像<body ng-controller="MyCtrl"> <ion-header-bar class="bar-positive"> <h1 class="title">Smart List</h1> </ion-header-bar> <ion-content> <ion-list> <ion-item ng-repeat="item in items track by $index" item="item" ng-click="getdetails($index)"> {{ item.name }} </ion-item> </ion-list> </ion-content> </body>这样的块级元素和像h4这样的内联，并期望它们正确对齐，但是有一个更简单的解决方案，添加第三个单元格：< / p>

＆＃13;

img

＆＃13;

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

＆＃13;

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

1 个答案: