我有许多按钮,里面有不同大小的图像:
<div>
<button><img src="http://via.placeholder.com/200x200" alt=""></button>
<button><img src="http://via.placeholder.com/200x100" alt=""></button>
<button><img src="http://via.placeholder.com/200x50" alt=""></button>
<button><img src="http://via.placeholder.com/200x200" alt=""></button>
<button><img src="http://via.placeholder.com/200x150" alt=""></button>
</div>
所以,我想将这些图像垂直对齐到底部,如下图所示:
但无论我尝试什么,图像总是垂直居中:
查看这个 jsFiddle:https://jsfiddle.net/y7efebwg/
有趣的是,如果我使用 div
而不是 button
,一切都会按预期工作:https://jsfiddle.net/Lkycyvvf/1/
最佳答案
将按钮的 display
属性设置为 flex
并使用 flex-direction:column
和 justify-content:flex- end
似乎可行。
div {
display: flex;
}
button {
display: flex;
flex-direction: column;
justify-content: flex-end;
}
<div>
<button><img src="http://via.placeholder.com/200x200" alt=""></button>
<button><img src="http://via.placeholder.com/200x100" alt=""></button>
</div>
关于css - <button> 中的垂直对齐元素作为 flex 元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46711001/