How to position text within an image

Question

I have the following picture and text TEST, would like to position the word TEST where is the X in the image.

<img src="../Content/Images/top.png">
<label>TESTE</label>        

What’s the best way to do that?

Answer 1

First you must put both elements detritus from a div or figure with position: relative and display: inline-block;, then you can put a position: absolute; in the label or figcaption and position it with the properties top, right, bottom and/or left.

#container {
  display: inline-block;
  position: relative;
}

#container figcaption {
  position: absolute;
  top: 145px;
  right: 20px;
  font-size: 40px;
  color: black;
  text-shadow: 0px 0px 5px black;
}

<figure id="container">
  <img src="http://cdn.flaticon.com/png/256/63523.png" />  
  <figcaption>Teste</figcaption>
</figure>

In the example below, I have the image of a gift card and want to enable the label inside the taja of the same.

Answer 2

Using img and label is possible that way.

.container {
  position: relative;
}

#image {
  position: absolute;
}

#texto {
  position: absolute;
  font-size: 32px;
  left: 250px;
  top: 135px;
}

<div class="container">
  <img id="image" src="https://i.stack.imgur.com/yVoVU.png">
  <label id="texto">TESTE</label>
</div>

Answer 3

Try using a figurecaption to group the image and label, after that you have to switch to CSS. There you place the figurecaption with relative position and the label with absolute position