Не удается выровнять элементы по центру с помощью Flexbox

Question

Я перепробовал все, что знаю, и не могу выровнять свои предметы по центру. У меня есть один большой контейнер, показанный ниже ...

.container2 {
  margin: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  background-image: linear-gradient(80deg, black, rgb(221, 198, 134));
  width: 95%;
}

Это большой контейнер, отображающий все, что я хочу, в столбце, как я хочу. Затем у меня есть изображения в нижней части «container2», которые мне нужно отображать в строке, вот код ниже ...

.photo-container {
  display: inline-block;
  /* margin: 0 auto;
  position: relative;
  left: 50%; */
}

Я пробовал много разных способов, и я не могу заставить его работать. Вот фактические элементы img ...

.photo-container img {
  margin: 5px;
  width: 300px;
  height: 300px;
  border: 1px solid rgb(0, 0, 0);
}

Вот HTML

<div className="container2">
<div className="photo-container">
          <img src={Barber.image1}></img>
          <img src={Barber.image2}></img>
          <img src={Barber.image3}></img>
          <img src={Barber.image4}></img>
          <img src={Barber.image5}></img>
          <img src={Barber.image6}></img>
        </div>
      
</div>

"left: 50%" устанавливает .photo-container за пределами "container2", не знаю, почему он это делает, поскольку я думал, что position relative устанавливает его относительно своего родителя. Кто-нибудь может помочь? Спасибо

Answer 1

Вы можете просто использовать text-align: center на photo-container, чтобы все изображения располагались по центру.

.container2 {
  margin: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  background-image: linear-gradient(80deg, black, rgb(221, 198, 134));
  width: 95%;
 
}

.photo-container {
  padding: 5px;
  border: 1px solid rgb(0, 0, 0);
  text-align: center;
}

<div class="container2">
  <div class="photo-container">
    <img src="https://via.placeholder.com/300/09f.png"></img>
    <img src="https://via.placeholder.com/300/09f.png"></img>
    <img src="https://via.placeholder.com/300/09f.png"></img>
    <img src="https://via.placeholder.com/300/09f.png"></img>
    <img src="https://via.placeholder.com/300/09f.png"></img>
    <img src="https://via.placeholder.com/300/09f.png"></img>
  </div>

</div>