我想将不同大小的图像对齐到 div 的底部,但图像也在它们自己的 div 中,因此其他答案不起作用。
我有以下 HTML:
<div class="row footer-links">
<section>
<div class="col-md-4">
<p>
Proudly presented and sponsored by
</p>
</div>
<div class="col-md-8 col-xs-12 logo-links">
<div class="row logo-bottom">
<div class="col-md-2 col-xs-12 logo-border col-md-offset-1">
<img id="rasv" class="center-block" src="img/rasv.png" alt="RASV logo">
</div>
<div class="col-md-2 col-xs-12 logo-border">
<img class="center-block" src="img/victoria-farmers.png" alt="Victoria Farmers logo">
</div>
<div class="col-md-2 col-xs-12 logo-border">
<img class="center-block" src="img/anz.png" alt="ANZ logo">
</div>
<div class="col-md-2 col-xs-12 logo-border">
<img class="center-block" src="img/pwc.png" alt="PWC logo">
</div>
<div class="col-md-2 col-xs-12 logo-border">
<img class="center-block" src="img/vac.png" alt="VAC logo">
</div>
</div>
</div>
</section>
</div>
我使用了以下 CSS:
.logo-border {
border-right: 1px solid #d1d3d4;
height: 54px;
vertical-align: bottom;
display: table-cell;
}
这是一个Code Pen了解更多信息。
最佳答案
你们真的很接近。
它不起作用的原因是因为列是 float 的。因此,元素的行为不像table-cell
,因此使vertical-align:bottom
无用。
您只需添加 float: none
即可按需要工作。
.logo-bottom .logo-border {
border-right: 1px solid #d1d3d4;
height: 54px;
vertical-align: bottom;
display: table-cell;
float: none;
}
作为旁注,我增加了 specificity将选择器 .logo-border
更改为 .logo-bottom .logo-border
,以便覆盖 float: left
。
关于html - 如何将图像与嵌套 div 的底部对齐(在 Bootstrap 中)?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28868027/