Flex box alignment of left and centre elements

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>

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>

paulie i didn't like the answer to the question that you have marked this a duplicate on it wasn't clear to me — MarMan29, Sep 13 '16 at 15:02
thanks link2pk that's the best so far. Can you please provide that as an answer — MarMan29, Sep 13 '16 at 15:14
once a question is marked as duplicate then SO restricts answering that question, i think — Praveen, Sep 13 '16 at 15:21
@MarMan29, see [**this post**](http://stackoverflow.com/q/38948102/3597276), and box #66 in [**this post**](http://stackoverflow.com/a/33856609/3597276). — Michael Benjamin, Sep 13 '16 at 15:21
wow i'm surprised. Thanks for everyone's contributions i honestly thought there would be a simpler way they all seem like $hitty hacks to me. I think the best solution is absolute positioning with a calculated offset after all... — MarMan29, Sep 13 '16 at 15:29
Flexbox can't do everything. Scratch that. *CSS* can't do everything. Hence, hacks have been around since the beginning of time. Tables/floats for layout. OL/UL for navigation. And now, fake elements for equal balance in a flex container. Life isn't perfect, but $hit gets done ;-) — Michael Benjamin, Sep 13 '16 at 15:32
Absolute positioning is one option. Just keep in mind that it removes the element from the document flow, which may lead to overlap with surrounding elements. Pseudo-elements, as I describe in my links above, stay in-flow without breaking semantics. Good luck! — Michael Benjamin, Sep 13 '16 at 15:34
Hahah thanks Michael_B yes you're right ;) Thanks for the responses and yes I have offset the left margin to counter the absolute not taking up space. Cheers mate. — MarMan29, Sep 13 '16 at 15:37

Gowtham · Accepted Answer · 2016-09-13T15:00:34.247

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>

edited Sep 13 '16 at 15:00

answered Sep 13 '16 at 14:55

Gowtham

1,557
12
24

Thanks Gowtham but isn't it the margin-left in your answer that did the alignment? – MarMan29 Sep 13 '16 at 14:57
Ya Marman i tried different ways but this one worked out, since i have given in percentage it wont affect responsiveness – Gowtham Sep 13 '16 at 14:58
Yes but it seems like a hack solution no offence. What's the point of having the justify-content: center; if we just use the margin to offset? – MarMan29 Sep 13 '16 at 15:00
Sorry it was a typo error,i have removed it ,just look into it. – Gowtham Sep 13 '16 at 15:01
The problem is if the width or image dimensions change the margin set needs to be re-calculated as it's no longer correct.... – MarMan29 Sep 13 '16 at 15:09

Flex box alignment of left and centre elements

1 Answers1