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

标签 html css flexbox

我正在开始Web开发人员培训,但无法在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/

相关文章:

javascript - 使用 ASP.net 控件和 Telerik 控件禁用表

html - 是否可以使用&lt;iframe&gt;在我的网站上显示另一个网站的100%?

css - 元素未固定到位

css - IE8 开发者工具缺少一些样式

html - <li>元素所需的css动画循环

Firefox v36 及更高版本中的 CSS Flexbox 问题

javascript - 在某些 slider 值处更新文本

html - 元素在父宽度上均匀分布,并具有空间-Angular Flexlayout响应

html - Flexboxs child 溢出 parent

javascript - jQuery中的隐藏/显示功能存在问题