Question

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

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

Answer 1

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

vertical-align: middle;

并删除这些：

display: inline-block;
position: relative;

这里没有center。它必须是middle。请更正它。并从display: inline-block中移除<div>。你的最终代码应该是：

＆＃13;

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

＆＃13;

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

＆＃13;

单击运行代码段并按整页以检查这是否是您所期望的。

Answer 2

尝试将display: inline-block更改为display: block（以及删除margin-left: auto; margin-right: auto;。如果您确定#imagesMain占用了屏幕宽度的100％，图像居中，这将工作正常。

Answer 3

可能你的问题是容器，因为图像正确对齐中心，我已经简化了你的代码并为容器和图像上色：

#imagesMain{

    position:relative;
    display: inline-block;

    width:100%;
    height:250px;
    margin-top:20px;

    background-color:red;

    text-align:center;
}
#imagesMain img{
    background-color:blue;
    height: 200px;
    width: 150px;
    margin-left:-4px; /* trick for remove the space beetwen */
}

https://jsfiddle.net/bcpph0pp/1/

<强>更新

阅读其他评论我认为您希望所有评论都在中间对齐，这是为FLEX BOX生成代码的良好资源：http://the-echoplex.net/flexyboxes/

这是一个例子：https://jsfiddle.net/bcpph0pp/2/

Answer 4

尝试学习flexbox，因为它有很多用途，可以很好地对齐项目和内容。它还能让你的css非常小。

如果你想让它们保持中心的话。你应该使用justify-content: center;

#imagesMain{
  display: flex;
  justify-content: center;
}
#imagesMain img{
  height: 400px;
  width: 300px;
  margin: 0 10px;
}

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

对于其他用途，请查看css tricks，它们为如何使用flexbox提供了很好的示例。

将CSS中的多个图像并排居中

4 个答案: