Clever Geek Handbook

Centering a block.container that includes 3 images

I have 3 images in a div that I need in my web page. I need 3 images with a center image.

I believe the container should be focused, but I can't figure out its life! Thank!

Here is the code I made. Everything works, I just need 3 images in the 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>
<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>
Run codeHide result


+3


source to share


3 answers


You have to add a div wrapper around your .container divs and then make the same width as the image at the top and create a center alignment of the text.

Style for this:

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

1920px comes from the image you are trying to center over.



Here's a fiddle of this worker

html demonstrating the wrapper:

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


source


To create a center child, set this style to your parent:

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


Don't need display: block

either or margin: auto

or position: absolute/relative

... for child elements.

In your case, wrap the div .container

in a parent div that said.

0


source


The easiest way to achieve what you want with what you already have is to set text-align: center

in the parent container of your .container

divs. I tied the code up a bit, but I just added .container-wrapper

which contains your centered elements and it should work as desired.

.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>
Run codeHide result


0


source






More articles:


All Articles