html - 在 flexbox 中定位图标/图像

Question

我正在开始我的网络开发人员培训，但我在移动(在本例中为中心) flexbox 内的图标/图像和文本时遇到了麻烦。谁能帮忙？ 我的 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 以使其适合代码段窗口)。

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

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