分享
三行代码  ›  专栏  ›  技术社区  ›  Jayg713

无法使用flexbox将项目居中对齐

  •  1
  • Jayg713  · 技术社区  · 1 周前

    我已经试过了所有我知道的东西,但我不能让我的项目中心对齐。我有一个大集装箱如下。。。

    .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 {
      display: inline-block;
      /* margin: 0 auto;
      position: relative;
      left: 50%; */
    }
    

    .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容器设置在“container2”之外,不知道它为什么这样做,因为我认为position relative设置它相对于其父容器。有人能帮忙吗?谢谢

    1 回复  |  直到 1 周前
        1
  •  2
  •   AlwaysHelping    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>