无法让引导垂直图像对齐工作答案

【问题标题】：Can't get bootstrap vertical image alignment to work无法让引导垂直图像对齐工作
【发布时间】：2019-12-12 16:50:56
【问题描述】：

我目前正在开发一个网站，并且正在使用 bootstrap 3。我正在尝试做的是垂直对齐几个不同大小的图像。它们似乎与顶部对齐，但我想将它们居中。

这里有一张图片让你更好地理解：https://imgur.com/AZERxE4

我尝试过这样的事情：Center Image Vertically and Horizontally in Bootstrap Grid
这个：https://medium.com/wdstack/bootstrap-4-vertical-center-1211448a2eff
还有这个：https://mdbootstrap.com/docs/jquery/utilities/vertical-align/

但这些都不起作用。

最好的解决方案似乎是更新到 bootstrap 4，但我担心我会破坏我的整个网站......

【问题讨论】：

如果你不想更新Bootstrap，那为什么不自定义css，你可以使用flex。
请使用类名“align-middle”而不是“image-center”

标签： css twitter-bootstrap vertical-alignment

【解决方案1】：

鉴于我的评论，我发布了一个答案。

.image-container {
  display: flex;
  align-items: center;
  justify-content: center;
}

.image-container img {
  margin: 5px;
}

<div class="image-container">
  <img src="https://via.placeholder.com/150X75">
  <img src="https://via.placeholder.com/150X100">
  <img src="https://via.placeholder.com/150X45">
</div>

【讨论】：