html - 并排居中CSS中的多个图像

Question

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

<div id="imagesMain">
    <img src="IMG_20140930_140020.jpg">
    <img src="IMG_20140922_164619.jpg">
    <img src="IMG_20140608_181811.jpg">
</div>

还有我的 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 block 调整了它们的大小，但我无法让它们做其他事情。有什么想法吗？

Answer 1

您可以使用几乎相同的 CSS，但只需进行一个简单的更正，更改:

vertical-align: middle;

并删除这些:

display: inline-block;
position: relative;

没有 center这里。必须是 middle .请更正。并删除 display: inline-block来自 <div> .你的最终代码应该是这样的:

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

<div id="imagesMain">
  <img src="IMG_20140930_140020.jpg">
  <img src="IMG_20140922_164619.jpg">
  <img src="IMG_20140608_181811.jpg">
</div>

点击 Run Code Snippet 并按 Full Page 检查这是否是您所期望的。