如何保持文本左对齐，图像在页面上水平居中，文本在图像上垂直居中

Question

如果不使用float，文本将正确垂直对齐，但不会左对齐。如果我确实使用浮动，文本左对齐，垂直对齐关闭

我也尝试过使用flex，但自对齐似乎不起作用：

#container{
display:flex;
justify-content:center;
border:solid 1px green;
}
p{align-self:start;}

p{
float:left;
vertical-align:middle;
display:inline-block;
}
img{
display:inline-block;
vertical-align:middle;}
div{
text-align:center;}

<div id='container'>
<p>some text</p>
<img src ="https://via.placeholder.com/150x30">
</div>

Answer 1

#container{
display:flex;
justify-content:space-between;
align-items:center;
border:solid 1px green;
}
#x{
visibility:hidden;
}

<div id='container'>
<p>some text</p>
<img src ="https://via.placeholder.com/150x30">
<p id='x'>some text</p>
</div>