I have the following image and text TEST , I would like to position the word TEST where X is in the image.
<img src="../Content/Images/top.png">
<label>TESTE</label>
What is the best way to do this?
You should first place both elements of a div
or figure
with position: relative
and display: inline-block;
, so you can put a position: absolute;
in label
or figcaption
and position it with 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 get the label inside the taja
of it.
Using img
and label
is possible in this 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"><labelid="texto">TESTE</label>
</div>
Try to use figurecaption
to group the image and the label, after which you will have to move to CSS. There you place the figurecaption with relative position and the label with absolute position