Html 在CSS中将多个图像并排居中

我是CSS和HTML的初学者，所以我确信这是一个混乱。但我要做的是，在CSS中，将3个图像并排放在水平中心。我尝试过不同的解决方案，使它们正确对齐，但它们仍然停留在页面的左侧，或者堆叠在彼此的顶部（有时重叠）

---

默认情况下，图像是巨大的。第二个CSS块调整了它们的大小，但我不能让它们做更多的其他事情。有什么想法吗？

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

垂直对齐：中间对齐；

然后移除这些：

显示：内联块；
位置：相对位置；

这里没有

中心

。它必须是中间的。请改正它。并从

中删除

显示：内联块。您的最终代码应该如下所示：


#imagesMain{
填充：0；
左边距：自动；
右边距：自动；
边缘顶部：20px；
文本对齐：居中；
}
#imagesMain img{
高度：400px；
宽度：300px；
垂直对齐：中间对齐；
}

尝试将
显示：内联块
更改为
显示：块
（以及删除
左侧边距：自动；右侧边距：自动；
。如果您对
#imagesMain
占据100%的屏幕宽度，图像居中，这将很好地工作。
尝试学习flexbox，因为它有许多用于精确对齐项目和内容的用途。
它还使您的css非常小

如果您想让它们始终居中。您应该使用
justify content:center；


#imagesMain{
显示器：flex；
证明内容：中心；
}
#imagesMain img{
高度：400px；
宽度：300px；
利润率：0.10px；
}
可能您的问题在于容器，因为图像与中心对齐正确，所以我简化了您的代码并为容器和图像上色：

#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 */
}


更新

阅读其他评论，我认为您希望所有在中间对齐，这是生成Flex框的代码的好资源：
这是一个例子：
你的意思是说，图像的宽度和高度不同，你希望它们垂直和水平居中？侧注，
垂直对齐：居中；
无效。@j08691这不是侧注，这是要点。
：）
检查我的更新！：）由于垂直对齐，图像不会居中：中间；由于文本对齐居中，它将居中尝试删除垂直对齐：中间；这不会影响任何人thing@Shree29你为什么这么说？这两个都起作用了。非常感谢。我觉得这很简单，但我错过了它。@PraveenKumar在没有垂直对齐的情况下检查这把小提琴：居中；静止图像是centered@Shree29对因为图像高度相同，所以不需要<代码>：）

#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;
}

#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 */
}