Html 居中一个包含3个图像的容器块

我有3个在一个div的图像，我需要集中在我的网页。我需要3个图像与主要的顶部图像居中

我相信。容器需要居中，但我一辈子都搞不清楚！谢谢大家!

这是我写的代码。所有的工作，我只需要3个图像居中

要使中心子元素将此样式设置为其父元素，请执行以下操作：

.parent{
   display: flex;
   justify-content: center;
 }

无需

显示：块

或

边距：自动

或

位置：绝对/相对

。。。对于子元素

---

在您的例子中，将

.container

div包装在一个父div中，该父div表示。

使用您已有的内容实现所需功能的最简单方法是在

.container

div的父容器上设置

文本对齐：居中。我稍微整理了一下代码，但是我简单地添加了一个
.container wrapper
，它包含以您为中心的元素，并且应该可以根据需要工作


.container{
显示：内联块；
位置：相对位置；
宽度：30%；
保证金：自动；
}
.形象{
显示：块；
宽度：100%；
高度：自动；
}
.覆盖{
位置：绝对位置；
排名：0；
底部：0；
左：0；
右：0；
身高：100%；
宽度：100%；
不透明度：0；
过渡：放松；
背景色：#f03d41；
}
.container:悬停。覆盖{
不透明度：1；
}
.文本{
颜色：白色；
字体大小：20px；
位置：绝对位置；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
-ms转换：翻译（-50%，-50%）；
}
.集装箱包装{
文本对齐：居中；
}



您必须在.container div周围添加一个包装div，然后使其与顶部图像的宽度相同，并使其文本居中对齐

此应用程序的样式：

.container-wrapper {
    text-align: center;
    width: 1920px;
}

1920px来自您试图居中的顶部图像

这是一个工作原理图

演示包装器的html是：

 <div class="container-wrapper">
<div class="container"><img src="https://cdn.shopify.com/s/files/1/1317/8733/files/Creative.jpg?5705585986642973725" alt="Creative" class="image" />
<div class="overlay"><img src="https://cdn.shopify.com/s/files/1/1317/8733/files/Creative_Hover.jpg?5705585986642973725" alt="CreativeHover" class="image" /></div>
</div>
<div class="container"><img src="https://cdn.shopify.com/s/files/1/1317/8733/files/Brand_Rep.jpg?5705585986642973725" alt="Brand_Rep" class="image" />
<div class="overlay"><img src="https://cdn.shopify.com/s/files/1/1317/8733/files/Brand_Rep_Hover.jpg?5705585986642973725" alt="Brand_RepHover" class="image" /></div>
</div>
<div class="container"><img src="https://cdn.shopify.com/s/files/1/1317/8733/files/Influencer.jpg?5705585986642973725" alt="Influencer" class="image" />
<div class="overlay"><img src="https://cdn.shopify.com/s/files/1/1317/8733/files/Influencer_Hover.jpg?5705585986642973725" alt="InfluencerHover" class="image" /></div>
</div>
</div>


要共享任何html以了解您到目前为止所做的工作吗？我将.container包装器添加到了我的容器中，但它没有改变任何内容。如果.container是居中的还是其他的，您还应该确保添加规则
.container wrapper{text align:center}
。是你做的吗？我忘了把这个添加到主分区。它成功了！非常感谢你的耐心，我对这一点还不熟悉，学到了很多。非常感谢。最后一件事，如果你知道的话。比如说，当将浏览器缩小到iphone/android大小时，图像仍然并排排列。一旦浏览器大小变小，如何使它们垂直堆叠以便于阅读？您可以执行媒体查询以获取屏幕大小，并根据屏幕大小更改.container包装的宽度。您可以在此处找到媒体查询列表：