居中包含 3 个图像的 .container 块答案

【问题标题】：Centering a .container block that includes 3 images居中包含 3 个图像的 .container 块
【发布时间】：2017-03-26 20:51:23
【问题描述】：

我的 div 中有 3 张图片需要以我的网页为中心。我需要以主顶部图像为中心的 3 张图像。

我相信 .container 需要居中，但我一生都无法弄清楚！谢谢！

这是我编写的代码。一切正常，我只需要将 3 张图片居中即可。

<h2 class="section-title desktop-12" style="text-align: center;"></h2>
<p><img src="//cdn.shopify.com/s/files/1/1317/8733/files/PHOTOGRFR_JoinTheTribe_1920x500_8f70f303-f8ac-4d6a-9c52-ae8cd939349d.jpg?v=1490462024" alt="Join The Tribe" /></p>
<p> </p>
<style><!--
.container { display: inline-block; position: relative; width: 30%; margin: auto; } .image { display: block; width: 100%; height: auto; } .overlay { position: absolute; top: 0; bottom: 0; left: 0; right: 0; height: 100%; width: 100%; opacity: 0; transition: .5s ease; background-color: #f03d41; } .container:hover .overlay { opacity: 1; } .text { color: white; font-size: 20px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); }
--></style>
<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>

【问题讨论】：

任何要分享的 html 也可以弄清楚你到目前为止做了什么？

标签： html css containers

【解决方案1】：

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

这个风格：

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

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

这是这个工作的fiddle

演示包装器的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>

【讨论】：

非常感谢。如果你知道的话，最后一件事。当将浏览器最小化到 iphone/android 的大小时，图像仍然是并排的。一旦浏览器尺寸变窄以便于阅读，我将如何让它们垂直堆叠？
您将执行媒体查询以获取屏幕尺寸并根据屏幕尺寸更改 .container-wrapper 的宽度。您可以在此处找到媒体查询列表：css-tricks.com/snippets/css/media-queries-for-standard-devices

【解决方案2】：

用已有的东西实现你想要的最简单的方法是在.container div 的父容器上设置text-align: center。我稍微修改了代码，但我简单地添加了一个 .container-wrapper ，其中包含您的居中元素，它应该可以按需要工作。

.container {
    display: inline-block;
    position: relative;
    width: 30%;
    margin: auto;
}
.image {
    display: block;
    width: 100%;
    height: auto;
}
.overlay {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
    opacity: 0;
    transition: .5s ease;
    background-color: #f03d41;
}
.container:hover .overlay {
    opacity: 1;
}
.text {
    color: white;
    font-size: 20px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
}
.container-wrapper {
    text-align: center;
}

<h2 class="section-title desktop-12" style="text-align: center;"></h2>

  <p><img src=
  "//cdn.shopify.com/s/files/1/1317/8733/files/PHOTOGRFR_JoinTheTribe_1920x500_8f70f303-f8ac-4d6a-9c52-ae8cd939349d.jpg?v=1490462024"
  alt="Join The Tribe" /></p>

  <p></p>

  <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>

【讨论】：

我将 .container-wrapper 添加到我的容器中，但它没有改变任何东西。 .container 应该是居中的还是其他的东西
您还应该确保添加规则.container-wrapper { text-align: center }。你这样做了吗？
我忘记将
添加到主 div。有效！非常感谢您的耐心等待我是新手并且学到了很多东西。

【解决方案3】：

要使中心子元素将此样式设置为它们的父元素：

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

对于子元素，无需 display: block 或 margin: auto 或 position: absolute/relative ...。

在您的情况下，将 .container div 包装在一个父 div 中。

【讨论】：