Html 如何将一组底部对齐的图像垂直居中？

我有3个正方形，并排有不同的高度。我希望它们彼此底部对齐，但我希望整个组中心在包含框内对齐

好像是把它们放在一个包装器中，它的样式是“垂直对齐：中间对齐”。但是不，它不起作用

有什么建议吗

#红色{
背景色：#FF0000；
高度：20px；
宽度：20px；
}
#绿色的{
背景色：#00FF00；
高度：60px；
宽度：60px；
}
#蓝色的{
背景色：#0000FF；
高度：40px；
宽度：40px；
}
#容器{
宽度：300px；
高度：100px；
边框：薄而实的黑色；
}
#包装纸{
垂直对齐：中间对齐；
}
身体{
字号：0；
}

---

如果不想使用flexbox，则应使用表格布局。

尝试使用

display:flex。
#容器
应该有一个
对齐项目：居中
属性，而
#包装器
需要一个
对齐项：柔性末端


您可以更改以下选项的
align items
：


弹性起始：项目的交叉起始边距边缘位于交叉起始线上
柔性端：项目的交叉端边距边缘放置在交叉端线上
居中：项目在横轴上居中
基线：项目对齐，如基线对齐
拉伸（默认）：拉伸以填充容器（仍然遵循最小宽度/最大宽度）

有关


回到你的问题上来。看看这个例子：


#红色{
背景色：#FF0000；
高度：20px；
宽度：20px；
}
#绿色的{
背景色：#00FF00；
高度：60px；
宽度：60px；
}
#蓝色的{
背景色：#0000FF；
高度：40px；
宽度：40px；
}
#容器{
显示器：flex；
对齐项目：居中；
宽度：300px；
高度：100px；
边框：薄而实的黑色；
}
#包装纸{
显示器：flex；
对齐项目：柔性端；
}
身体{
字号：0；
}

组应垂直、水平或两者居中对齐？垂直对齐：中间；仅适用于内联和表元素。您能给我看一下您真正需要的任何示例输出吗？我指的是任何图像？并防止容器散乱：表布局：固定；
#container {
  display: table;
}
#wrapper {
  display: table-cell;
}