How to position 2 items such that one is center and one is to the left?

Question

I am trying to style a chat call to action such that I have an icon positioned to the left, and some text centered like this:

[ @   Text aligned in center     ]

I have tried this:

.icon{
  justify-self: flex-start;
}
.container{
  display: flex;    
  align-items: center;
  justify-content: center;
  background-color: lightyellow;
  max-width: 600px;
}

<div class="container">
    <div class='icon'> @ </div>
    <div class='text'>text aligned in center</div> 
</div>

The current output looks like this:

[     @Text aligned in center     ]

Can anyone suggest a way to achieve the goal of positioning one item in the center and one to the left?

Thanks!

score -2 · Accepted Answer · answered Sep 17 '20 at 04:31

.icon {
  flex: 0 0 auto;
}

.text {
  flex: 1 1 auto;
  text-align: center;
}

.container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: lightyellow;
  max-width: 600px;
}

<div class="container">
  <div class='icon'> @ </div>
  <div class='text'>text aligned in center</div>
</div>

How to position 2 items such that one is center and one is to the left?

1 Answers1