How to align a text in the middle of the height of an image?

I will leave a code that will position your text where you want, changing the values of

top: 20px; left: 120px; in css

.image { 

   position: relative; 

   width: 100%; /* para IE 6 */
}
.h2 { 
   position: absolute; 
   top: 20px; 
   left: 120px; 
   width: 100%; 
}

.h2 span { 
   color: blue; 
   font: bold 14px Helvetica, Sans-Serif; 
   letter-spacing: -1px;  
}
}

<div class="image">
<img src="https://i.stack.imgur.com/vNpu1.png"alt="" />
  
 <h2  class="h2"><span>La Treta<span class='spacer'></span></h2>

 </div>

Normally you will use the display: table-cell in the box where you want to stylize the vertical position of the text and then use vertical-align: middle , but then you need to set a height for that box as well.

However, perhaps with display: flex is much simpler and less ugly. If I were you, I'd study how he behaves. Today I'm too old to learn this vompra ... = P

Just apply the vertical-align: middle image.

By default, images are positioned at the bottom of the line. Here's how simple it is:

Html:

<div>
  <img class="middle" src="http://placehold.it/100x50"alt=""> Teste
</div>

Css:

.middle {
  vertical-align: middle;
}

Example link: link