我需要垂直对齐 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;
}
最佳答案
您正在混合像 h4
这样的 block 级元素和像 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>
关于html - div 内的响应式垂直居中元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40486156/