Question

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

我一直试图让以下内容正确对齐。我正在尝试将图像左对齐并且跨度内的文本居中。起初我试图用绝对定位跨度并设置左：0;但那搞砸了。然后我尝试了边距：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>

Answer 1

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

左侧和中央元素的柔性盒对齐

1 个答案: