Need to Align Image and Text Horizontally and Vertically Centered

Question

I can align them vertically and horizontally centered individually, but I need them both as a single unit to be centered horizontally, and the text to be centered vertically next to the image.

Here is what I have:

<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>

If I don't have the "margin-left" on the text then they overlap each other, but with the margin they are off-center.

I've looked through a couple dozen Stackoverflow answers to similar questions, but many are old and no longer work/supported, or it just isn't what I need.

TIA!

Answer 1

You can do also do it by simple css trick

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

Answer 2

Like this?

 <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; 
}