弹性框居中不起作用

Question

所以我最近一直在使用 flex box 并且有定位的手，但是对齐仍然很困难。

我希望 X 图像并排放置在弹性框中，然后在页面变得太小时换行。这一切都很好。然而，没有发生的是 flex box 内的图像没有水平居中。我已经尝试了 justify-content、align-items、align-self 等的每一个组合来让它工作，但我似乎遗漏了一些东西。

这里是代码

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>

谢谢。

Answer 1

您只需在框内添加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>