不同宽度的组和中心图像？

Question

我有4张图像需要“分组”然后水平居中。这些是一个字母。它们不能组合成单个图像。

这就是我现在所拥有的：

#imageContainer {
  width: 100%;
  border: 1px solid blue;
}
#images {
  display: block;
  margin: auto;
}
#imageContainer img {
  display: inline;
  margin: auto;
  padding: 5px;
}

<div id="imageContainer">
  <div id="images">
    <img src="https://dummyimage.com/100x100/000/fff" alt="">
    <img src="https://dummyimage.com/80x100/000/fff" alt="">
    <img src="https://dummyimage.com/105x100/000/fff" alt="">
    <img src="https://dummyimage.com/135x100/000/fff" alt="">
  </div>
</div>

期望的行为看起来更像是这样：

我怎样才能做到这一点？

Answer 1

请使用：

#imageContainer {
    width: 100%;
    border: 1px solid blue;
    text-align: center;
}

我只在父div中添加text-align: center;。它正在发挥作用。如果您有任何问题，请告诉我。

Answer 2

您也可以使用#images{display:flex;align-items:center}