我正在开始我的网络开发人员培训,但我在移动(在本例中为中心) 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;
最佳答案
您忘记将 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>
关于html - 在 flexbox 中定位图标/图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43697268/