将CSS中的多个图像并排放置

我是CSS和HTML的初学者所以我确定这是一团糟.但我正在尝试做的是将3个图像并排放置在CSS的水平中心.我尝试过不同的解决方案让它们正确对齐,但它们仍然停留在页面的左侧或者堆叠在彼此之上(有时重叠).

我的CSS:

#imagesMain{
    display: inline-block;
    position:relative;
    padding: 0;
    margin-left:auto;
    margin-right:auto;
    margin-top: 20px;
    text-align:center;
}
#imagesMain img{
    height: 400px;
    width: 300px;
    vertical-align: center;
}

默认情况下,图像很大.第二个CSS块调整它们的大小,但我不能让它们做其他事情.有任何想法吗？

您可以使用几乎相同的CSS，但只需进行一次简单的修改即可：

vertical-align: middle;

display: inline-block;
position: relative;

#imagesMain {
  padding: 0;
  margin-left: auto;
  margin-right: auto;
  margin-top: 20px;
  text-align: center;
}
#imagesMain img {
  height: 400px;
  width: 300px;
  vertical-align: middle;
}