css - 左侧和中心元素的 flex 盒对齐

<分区>

   #xxx {
      position:relative;
      display:flex;
      height:32px;
      width:150px;
      background-color:black;
      color:white;
      font-family: Helvetica, Arial, sans-serif; 
      justify-content: center;
      margin-left:10px;
   }
   #xxx > span {
      align-self: center;
   }
   #xxx > img{
      margin-right:auto;
   }

   <body>
      <div id="xxx"><img src="xxx.png" height="32" width="32"/><span>hello</span></div>
   </body>

我一直在尝试让以下内容正确对齐。我试图让图像左对齐，跨度内的文本居中。起初我尝试用绝对定位跨度并设置 left:0;但那搞砸了。然后我尝试了 margin:auto 但这弄乱了居中对齐的元素。

<!DOCTYPE HTML>
<html>
   <style>
   #xxx {
      position:relative;
      display:flex;
      height:32px;
      width:150px;
      background-color:black;
      color:white;
      font-family: Helvetica, Arial, sans-serif; 
      justify-content: center;
      margin-left:10px;
   }
   #xxx > span {
      align-self: center;
   }
   #xxx > img{
      margin-right:auto;
   }

   </style>
   <body>
      <div id="xxx"><img src="xxx.png" height="32" width="32"/><span>hello</span></div>
   </body>
</html>

最佳答案

#xxx {
      position:relative;
      display:flex;
      height:32px;
      width:150px;
      background-color:black;
      color:white;
      font-family: Helvetica, Arial, sans-serif; 
      margin-left:20px;
   }
    span {
      align-self: center;
      margin-left:25%;


   }
  img{
  position:relative;
  }

<!DOCTYPE HTML>
<html>
     <body>
      <div id="xxx"><img src="http://www.imagenspng.com.br/wp-content/uploads/2015/02/yoshi-super-mario-01.png" height="32" width="32"/>
        <span>hello</span>
       </div>
   </body>
</html>

关于css - 左侧和中心元素的 flex 盒对齐，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39472925/

上一篇：使用 Grunt 的 CSS 版本号

下一篇：css - 在内容上覆盖透明滚动条

相关文章：

css - 如何在 flexbox 中使用安全中心？

javascript - 通过在悬停时更改 rel 来动画 jQuery 图表

html - 如何在reddit网站上专门找到html中的背景颜色

javascript - 在编译/预处理时呈现 MathJax/MathML，以创建没有 MathML 的 HTML 文件？

css - 分列时使用 Flexbox 实现等高 "rows"

javascript - CSS flex display 与 Chrome 中的相同 flex 元素不同

html - 为什么我的 div 没有占据其父容器的 100% 高度？

javascript - 在旧浏览器中显示 Flexbox

jquery - Flexslider 导航按钮在悬停时不起作用

javascript - 为第一张图片分配类别