柔性盒居中不起作用

Question

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

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

这是代码

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

谢谢。

Answer 1

您只需在框中添加margin:auto或制作容器display:flex（您忘记的内容）

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;