我有 3 个并排的不同高度的正方形。我希望它们彼此底部对齐，但我希望整个组在包含框内居中对齐。
似乎将它们放在样式为 vertical-align:middle 的包装器中应该可以。但是不，它不起作用。
关于如何做到这一点有什么建议吗？
https://plnkr.co/edit/IjqMn5W8xZxdy0XTWrAw?p=preview
#red {
background-color: #FF0000;
height: 20px;
width: 20px;
}
#green {
background-color: #00FF00;
height: 60px;
width: 60px;
}
#blue {
background-color: #0000FF;
height: 40px;
width: 40px;
}
#container {
width: 300px;
height: 100px;
border: thin solid black;
}
#wrapper {
vertical-align: middle;
}
body {
font-size: 0;
}<body>
<div id="container">
<div id='wrapper'>
<img id="red" src="">
<img id="green" src="">
<img id="blue" src="">
</div>
</div>
</body>最佳答案
#container {
display: table;
}
#wrapper {
display: table-cell;
}
http://codepen.io/Deka87/pen/oYXOwg
如果不急于使用 flexbox，您应该使用表格布局。
关于html - 如何垂直居中一组底部对齐的图像？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40493456/