我希望 html 图像与 div 标签的底部齐平。我似乎无法找到实现这一目标的方法。
这是我的 HTML:
<div class="span8">
<img src="/img/play-shot1.jpg" class="text-center shadow">
</div>
问题是 div 嵌套在其他具有填充或边距的 div 中。
将相对定位添加到包装 div 标签,然后将图像绝对定位在其中,如下所示:
CSS:
.div-wrapper {
position: relative;
height: 300px;
width: 300px;
}
.div-wrapper img {
position: absolute;
left: 0;
bottom: 0;
}
HTML:
<div class="div-wrapper">
<img src="blah.png"/>
</div>
现在图像位于 div 的底部。
使用弹性盒:
HTML:
<div class="wrapper">
<img src="pikachu.gif"/>
</div>
CSS:
.wrapper {
height: 300px;
width: 300px;
display: flex;
align-items: flex-end;
}
根据对另一个答案的一些评论中的要求,图像也可以水平居中justify-content: center;
< img style="vertical-align: bottom" src="blah.png" >
为我工作。在视差 div 内部也是如此。