Writing On Image HTML/Javascript

Question

<a href="#">
  <img class="img img-responsive" src="'black-box.png"/>
</a>

I have this piece of code, and I was curious how I would be able to write text on top of the image? I don't need to modify the image file itself, just need to display text on top of it.

Answer 1

You need to use a parent div which is relative position and your text div's position needs to be absolute.

<div class="container">

<a href="#">
  <img class="img img-responsive" src="https://picsum.photos/id/1/200/300"/>
</a>

<div class="text">
    test
</div>

</div>

.container {
   position: relative;
   text-align: center;
}
.text {
   position: absolute;
   top: 50%;
   left: 50%;
}

working fiddle - https://jsfiddle.net/sdvwu95g/

Answer 2

You could do something like this

 div { position: relative; display: inline-block; } P { margin: 0; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }

 <div> <img alt="this is an alt" src="https://picsum.photos/500/300"> <p> this is text </p> </div>

Answer 3

<a href="#"><span id="img-text"> your text </span>
      <img class="img img-responsive" src="https://picsum.photos/id/1/200/300"/>
    </a>
    
    #img-text {
    
      position: absolute;
      top: 50%;
      left:50%;
    
    }

Answer 4

Use this snippet

 *{ margin:0; padding:0; } div{ position: relative; width: 100%; height: auto; text-align: center; } .img{ position: relative; margin-top: 10px; width: 100%; height:auto; }

 <div> <span>This is my text</span> <a href="#"> <img class="img img-responsive" src="your image"/> </a> </div>