需要水平和垂直居中對齊圖像和文本

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”，那么它們會彼此重疊，但是在邊緣處它們會偏離中心。

我已經遍歷了數十個關於類似問題的Stackoverflow答案，但是許多答案已經過時了，不再起作用/不再受支持，或者這不是我所需要的。

TIA！

Answer 1

您也可以通過簡單的CSS技巧來做到這一點

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

Answer 2

像這樣？

 <div style="text-align: center; height: 50px; line-height: 50px; position: relative; border: 1px solid black;"> <img src="img/image.jpg" style="vertical-align: middle;"> <span>SOMETEXT<span> </div> 

Answer 3

.element{ 
  justify-content:center;
  align-items:center; 
}