html - 需要水平和垂直居中对齐图像和文本

Question

我可以将它们分别垂直和水平居中对齐，但我需要将它们作为一个整体水平居中，并且文本在图像旁边垂直居中。

这是我的:

<div style="text-align: center; height: 50px; position: relative; border: 1px solid black;">
    <img src="img/image.jpg"><span style="margin-left: 150px; position: absolute; top: 50%; left: 50%; -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%);">SOMETEXT<span>
</div>

如果我在文本上没有“margin-left”，那么它们会相互重叠，但由于有 margin，它们会偏离中心。

我浏览了几十个 Stackoverflow 对类似问题的回答，但很多都过时了，不再有效/不再受支持，或者这不是我需要的。

TIA!

Answer 1

你也可以通过简单的 css 技巧来做到这一点

div{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;
}