Question

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

我相信.container需要居中，但我无法理解我的生活！谢谢！

这是我制作的代码。一切正常，我只需要3个图像居中。

{
  "rules": {
    ".read": "auth != null",
    ".write": "auth != null"
  }
}

Answer 1

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

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

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

在你的情况下，将.container div包装在父div中，表示。

Answer 2

使用您已有的功能获得所需内容的最简单方法是在text-align: center div的父容器上设置.container。我已经对代码进行了一些修改，但我简单地添加了一个.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>

Answer 3

你必须在.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>

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

3 个答案: