In an attempt to customize a chat call to action, I am looking to have an icon aligned to the left and some centered text. Here is an example of how I envision it:
[ @ Text aligned in center ]
Here is what I have tried so far:
.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 result appears as follows:
[ @Text aligned in center ]
Is there a suggestion on how to successfully position one item in the center and one to the left?
Appreciate any help!