柔性盒居中不起作用(flex box centering not working)

编程入门行业动态更新时间:2024-10-04 09:26:05

所以我最近一直在使用柔性盒，并且有定位之手，但理由仍然很难。

我希望X图像在柔性框中并排放置，然后在页面变得太小时将其换行。一切正常。然而，没有发生的是柔性盒内的图像不是水平居中的。我已经尝试了每个组合的理由 - 内容，对齐项目，对齐 - 自我等，以使其工作，但我似乎缺少一些东西。

这是代码

body {
  background: black;
}

.general_peer_request_display {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  padding: 10px;
}

.general_peer_request_box {
  flex: 1 1 90px;
  padding: 5px;
  align-items: center;
  justify-content: center;
}

.general_peer_request_image {
  width: 80px;
  height: 80px;
  border-radius: 50% 50% 50% 50%;
  border: 3px double white;
  background: blue;
}

.general_peer_request_text {
  opacity: 0;
  padding: 3px 5px 3px 0px;
  text-align: left;
  padding: 15px 5px 15px 5px;
  width: 80px;
}

.general_peer_request_text:hover {
  opacity: 1;
  color: rgba(255, 255, 255, 1);
  text-shadow: 1px 1px white;
  cursor: pointer;
} 
  <div class="general_peer_request_display">
  <div class="general_peer_request_box">
    <div class="general_peer_request_image" style="background: url('') center no-repeat;">
      <div class="general_peer_request_text">Neo</div>
    </div>
  </div>
  <div class="general_peer_request_box">
    <div class="general_peer_request_image" style="background: url('') center no-repeat;">
      <div class="general_peer_request_text">Neo</div>
    </div>
  </div>
  <div class="general_peer_request_box">
    <div class="general_peer_request_image" style="background: url('') center no-repeat;">
      <div class="general_peer_request_text">Neo</div>
    </div>
  </div>
  <div class="general_peer_request_box">
    <div class="general_peer_request_image" style="background: url('') center no-repeat;">
      <div class="general_peer_request_text">Neo</div>
    </div>
  </div>
</div> 
  
 
 
 谢谢。 
So I have been working with flex box recently and have the hand of positioning but justification is still being difficult. 
I want X images to sit side by side in flex boxes, and then wrap when the page gets too small for them. This all works fine. However what isn't happening is the images inside the flex box aren't centering horizontally. I have tried every combo of justify-content, align-items, align-self etc to get it to work but I appear to be missing something. 
here is the code 
 
 
  
  body {
  background: black;
}

.general_peer_request_display {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  padding: 10px;
}

.general_peer_request_box {
  flex: 1 1 90px;
  padding: 5px;
  align-items: center;
  justify-content: center;
}

.general_peer_request_image {
  width: 80px;
  height: 80px;
  border-radius: 50% 50% 50% 50%;
  border: 3px double white;
  background: blue;
}

.general_peer_request_text {
  opacity: 0;
  padding: 3px 5px 3px 0px;
  text-align: left;
  padding: 15px 5px 15px 5px;
  width: 80px;
}

.general_peer_request_text:hover {
  opacity: 1;
  color: rgba(255, 255, 255, 1);
  text-shadow: 1px 1px white;
  cursor: pointer;
} 
  <div class="general_peer_request_display">
  <div class="general_peer_request_box">
    <div class="general_peer_request_image" style="background: url('') center no-repeat;">
      <div class="general_peer_request_text">Neo</div>
    </div>
  </div>
  <div class="general_peer_request_box">
    <div class="general_peer_request_image" style="background: url('') center no-repeat;">
      <div class="general_peer_request_text">Neo</div>
    </div>
  </div>
  <div class="general_peer_request_box">
    <div class="general_peer_request_image" style="background: url('') center no-repeat;">
      <div class="general_peer_request_text">Neo</div>
    </div>
  </div>
  <div class="general_peer_request_box">
    <div class="general_peer_request_image" style="background: url('') center no-repeat;">
      <div class="general_peer_request_text">Neo</div>
    </div>
  </div>
</div> 
  
 
 
Thank you.
                最满意答案
                
                    
                         你只需要在框内添加margin:auto或者让它们的容器display:flex （你忘了什么）  
 
 
  
  body {
  background: black;
}

.general_peer_request_display {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  padding: 10px;
}

.general_peer_request_box {
  flex: 1 1 90px;
  padding: 5px;
  /* Or this instead of margin auto
  display:flex;
  align-items: center;
  justify-content: center;
  */
}

.general_peer_request_image {
  width: 80px;
  height: 80px;
  border-radius: 50% 50% 50% 50%;
  border: 3px double white;
  background: blue;
  margin:auto; /*Added this*/
}

.general_peer_request_text {
  opacity: 0;
  padding: 3px 5px 3px 0px;
  text-align: left;
  padding: 15px 5px 15px 5px;
  width: 80px;
}

.general_peer_request_text:hover {
  opacity: 1;
  color: rgba(255, 255, 255, 1);
  text-shadow: 1px 1px white;
  cursor: pointer;
} 
  <div class="general_peer_request_display">
  <div class="general_peer_request_box">
    <div class="general_peer_request_image" style="background: url('') center no-repeat;">
      <div class="general_peer_request_text">Neo</div>
    </div>
  </div>
  <div class="general_peer_request_box">
    <div class="general_peer_request_image" style="background: url('') center no-repeat;">
      <div class="general_peer_request_text">Neo</div>
    </div>
  </div>
  <div class="general_peer_request_box">
    <div class="general_peer_request_image" style="background: url('') center no-repeat;">
      <div class="general_peer_request_text">Neo</div>
    </div>
  </div>
  <div class="general_peer_request_box">
    <div class="general_peer_request_image" style="background: url('') center no-repeat;">
      <div class="general_peer_request_text">Neo</div>
    </div>
  </div>
</div> 
  
 
You simply need to add margin:auto inside the boxes OR make their container display:flex (what you forgot) 
 
 
  
  body {
  background: black;
}

.general_peer_request_display {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  padding: 10px;
}

.general_peer_request_box {
  flex: 1 1 90px;
  padding: 5px;
  /* Or this instead of margin auto
  display:flex;
  align-items: center;
  justify-content: center;
  */
}

.general_peer_request_image {
  width: 80px;
  height: 80px;
  border-radius: 50% 50% 50% 50%;
  border: 3px double white;
  background: blue;
  margin:auto; /*Added this*/
}

.general_peer_request_text {
  opacity: 0;
  padding: 3px 5px 3px 0px;
  text-align: left;
  padding: 15px 5px 15px 5px;
  width: 80px;
}

.general_peer_request_text:hover {
  opacity: 1;
  color: rgba(255, 255, 255, 1);
  text-shadow: 1px 1px white;
  cursor: pointer;
} 
  <div class="general_peer_request_display">
  <div class="general_peer_request_box">
    <div class="general_peer_request_image" style="background: url('') center no-repeat;">
      <div class="general_peer_request_text">Neo</div>
    </div>
  </div>
  <div class="general_peer_request_box">
    <div class="general_peer_request_image" style="background: url('') center no-repeat;">
      <div class="general_peer_request_text">Neo</div>
    </div>
  </div>
  <div class="general_peer_request_box">
    <div class="general_peer_request_image" style="background: url('') center no-repeat;">
      <div class="general_peer_request_text">Neo</div>
    </div>
  </div>
  <div class="general_peer_request_box">
    <div class="general_peer_request_image" style="background: url('') center no-repeat;">
      <div class="general_peer_request_text">Neo</div>
    </div>
  </div>
</div>