在flexbox

Question

我正在开始我的网络开发人员培训，我无法移动（在本例中为中心）图标/图像和文本在flexboxes内。 有人可以帮忙吗？  我的HTML

<div class="thirdcontainer">
    <span class="flex3">
        <img src="../challenge/img/feature-quality.png"> 
   <img src="../challenge/img/feature-reliability.png"> 
    <img src="../challenge/img/feature-speed.png"> </span>
</div>

我的CSS

.thirdcontainer{
width: 1200px;
height: 150px;
background-color: #173493;
margin: 0 auto;
color: white;
font-family: open sans, serif;
font-size: 12px;
align-items: center;
justify-content: center;

}

.thirdcontainer{
width: 1200px;
height: 150px;
background-color: #173493;
margin: 0 auto;
color: white;
font-family: open sans, serif;
font-size: 12px;
align-items: center;
justify-content: center;

}

Answer 1

您忘了将display: flex;添加到容器CSS ...

（注意：我已将此width更改为max-width，以使其适合摘录窗口。）

＆＃13;

＆＃13;

.thirdcontainer{
  max-width: 1200px;
  height: 150px;
  background-color: #173493;
  margin: 0 auto;
  color: white;
  font-family: open sans, serif;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

＆＃13;

<div class="thirdcontainer">
  <span class="flex3">
        <img src="../challenge/img/feature-quality.png"> 
   <img src="../challenge/img/feature-reliability.png"> 
    <img src="../challenge/img/feature-speed.png"> </span>
</div>

＆＃13;

＆＃13;

＆＃13;