MarMan29 MarMan29 - 2 months ago 6
CSS Question

Flex box alignment of left and centre elements



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





I have been try to get the following to align properly. I'm trying to have the image left aligned and the text within the span centered. At first I tried to position the span with absolute and set left:0; but that messed up. Then I tried the margin:auto but that messed up the centre aligned element.

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

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

Comments