0
user16165663 25 czerwiec 2021, 05:45

4 odpowiedzi

Najlepsza odpowiedź

Mógłbyś zrobić coś takiego

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>
0
bobsfriend12 25 czerwiec 2021, 02:54

Musisz użyć nadrzędnego div, który jest pozycją względną, a pozycja div w tekście musi być bezwzględna.

<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%;
}

Działające skrzypce - https://jsfiddle.net/sdvwu95g/

0
Alimur Razi Rana 25 czerwiec 2021, 02:52
<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%;
    
    }
0
kshitiz ghimire 25 czerwiec 2021, 02:59

Użyj tego fragmentu

*{
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>
0
Soumik mahato 25 czerwiec 2021, 03:08