Tenho a seguinte imagem e o texto TESTE, gostaria de posicionar a palavra TESTE onde está o X na imagem.
<img src="../Content/Images/top.png">
<label>TESTE</label>
Qual a melhor forma para fazer isso?
Tenho a seguinte imagem e o texto TESTE, gostaria de posicionar a palavra TESTE onde está o X na imagem.
<img src="../Content/Images/top.png">
<label>TESTE</label>
Qual a melhor forma para fazer isso?
Primeiro você deve colocar ambos so elementos detro de uma div
ou figure
com position: relative
e display: inline-block;
, então você pode colocar um position: absolute;
no label
ou figcaption
e posicionar ele com as propriedades top
, right
, bottom
e/ou 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>
No exemplo abaixo, eu possuo a imagem de um cartão de presente e quero possicionar o label dentro da taja
do mesmo.
!important
bagunçando o seu estilo.
Commented
30/12/2015 às 13:09
Utilizando img
e label
é possível dessa forma.
.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.sstatic.net/yVoVU.png">
<label id="texto">TESTE</label>
</div>
Tente usar um figurecaption
para agrupar a imagem e o label, após isso terá de passar para o CSS. Lá você coloca o figurecaption com posição relativa e o label com posição absoluta