Центр изображений в <section>

Question

У меня есть тег <section>, в котором есть 3 изображения. Как я могу центрировать их для полноэкранных? Размер моего экрана 22,9 ". Вот код:

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

Спасибо за ваши ответы С уважением.

Answer 1

Ниже приведен фрагмент кода, который будет выполняться.

По сути, вы делаете изображения встроенными в блок, чтобы они располагались рядом друг с другом. Затем вы можете установить для родительского контейнера изображения значение 50% и сместить его с помощью transform: translate ();

При необходимости вы можете изменить ширину изображений, но примените ту же логику. должно все еще применяться.

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