Center images in a

Question

I have a <section> tag in which there are 3 images. How can I center them for fullscreens? The size of my screen is 22.9 ". here is the code:

    <section class="gallery">
  <div class="container-fluid">
    <div class="row">
      <div class="fw mix-container home-gallery">
        <div class="mix landscape portrait">
          <div class="item-img">
             <img src="images/parfum-aux-agrumes-002.jpg""/>
          </div>
        </div>  
        <div class="mix landscape portrait">
          <div class="item-img">
             <img src="images/parfum-aux-agrumes-003.jpg""/>
          </div>
        </div>  
        <div class="mix landscape portrait">
          <div class="item-img">
             <img src="images/parfum-aux-agrumes-004.jpg""/>
          </div>
        </div>        
    </div>  
  </div> 
</div>

Thank you for your answers Best regards.

Have you tried https://stackoverflow.com/a/7055404/2544873 ? Which advices : ``. I just added the style. — Tinmarino, Oct 24 '19 at 14:53
Hello, I have now altered my answer below, - i think i did miss a line of code out before, sorry for any confusion — Jonny, Oct 25 '19 at 17:16

score 0 · Answer 1 · answered Oct 25 '19 at 17:11

I have included a code snippet below that will run.

Essentially you make the images inline-block so they sit next to each other. Then you can set the images parent container to be left 50%, and offset it with transform:translate();

You can change the width of the images as needed but the same logic should still apply.

.mix {
  width: 200px;
  height: 100px;
  border: black solid 1px;
  display: inline-block;
}  

.mix-container {
   position: relative;
   display: inline-block;
   left: 50%;
   transform: translate(-50%, 0);
}

 <section class="gallery">
  <div class="container-fluid">
    <div class="row">
      <div class="fw mix-container home-gallery">
        <div class="mix landscape portrait">
          <div class="item-img">
             <img src="images/parfum-aux-agrumes-002.jpg"/>
          </div>
        </div>  
        <div class="mix landscape portrait">
          <div class="item-img">
             <img src="images/parfum-aux-agrumes-003.jpg"/>
          </div>
        </div>  
        <div class="mix landscape portrait">
          <div class="item-img">
             <img src="images/parfum-aux-agrumes-004.jpg"/>
          </div>
        </div>        
    </div>  
  </div> 
</div>  
</section>

Center images in a

1 Answers1