3

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>        

imagem

Qual a melhor forma para fazer isso?

1
  • Gostei muito dos dois modelos. Obrigado por postarem me ajudou a esclarecer essa dúvida. Commented 3/03/2018 às 17:13

3 Respostas 3

8

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.

3
  • dentro da modal esse seu exemplo fica desconfigurado, o texto aparece fora da imagem
    – Bia
    Commented 30/12/2015 às 12:49
  • @Bia você deve ter algum CSS !important bagunçando o seu estilo. Commented 30/12/2015 às 13:09
  • provavelmente é isso.
    – Bia
    Commented 30/12/2015 às 15:00
5

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>

1

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

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .