How to add text under image-CodePudding

I have 3 images next to each other and am trying to add a text under each one of them. However, when I add the text, it no longer keeps 3 in a row and instead it makes only 1 image on each row.

CodePudding user response：

you can use position absolute to text, and the text will always stay under the image, like this code

.container{
  display: flex;
  justify-content: space-evenly;
  align-items: center;                              
}
.card--wrap{
  position: relative;
  width: 300px;
  height: 300px;
  border: 1px solid black;
}
.card--img{
  border: 1px solid gray;
  width: 100px;
  height: 100px;
  position: absolute;
  top :0;
  text-align: center;
  left: 25%;
  font-size: 1rem;
}
.card--text{
  border: 1px solid gray;
  width: 100px;
  height: 100px;
  position: absolute;
  bottom :0;
  text-align: center;
  font-size: 1rem;
  left: 25%;
}

<div >
  <div >
    <div >This is image </div>
    <div >This is a text </div>
  </div>
    <div >
    <div >This is image </div>
    <div >This is a text </div>
  </div>
    <div >
    <div >This is image </div>
    <div >This is a text </div>
  </div>
</div>

CodePudding user response：

.img-container{
  display: flex;
  justify-content: space-evenly;
}

.img-card img{
  border: solid black 1px;
  margin: 10px;
  width: 200px;
}

.img-card p{
  text-align: center;
  margin-top: -10px;
}

<html>
  <body>
  <div >
    <div >
      <img src="https://cdn2.hubspot.net/hub/181021/file-338034070-jpg/images/real_world_examples.jpg">
      <p>Message</p>
    </div>
    <div >
      <img src="https://cdn2.hubspot.net/hub/181021/file-338034070-jpg/images/real_world_examples.jpg">
      <p>Message</p>
    </div>
    <div >
      <img src="https://cdn2.hubspot.net/hub/181021/file-338034070-jpg/images/real_world_examples.jpg">
       <p>Message</p>
    </div>
  </div>
  </body>
</html>

CodePudding user response：

Using the tag should work.

<figure>
  <img src="https://github.com/Muzzammmill/Muzzammmill/blob/master/images/html.jpg" alt="" style="width:100%">
  <figcaption>Fig.1 - Trulli, Puglia, Italy.</figcaption>
</figure>

for further reference: https://www.w3schools.com/tags/tag_figcaption.asp

Solution 2:

  <div >
      <img src="https://github.com/Muzzammmill/Muzzammmill/blob/master/images/html.jpg" alt="" style="width:100%">
    <div >This is a text </div>
  </div>

CodePudding user response：

maybe this post can solved your problem

<html>
  <body>
  <div  style = "display:flex; jsutify-content: space-evenly;">
  
    <div  style = "heigh:25%; width:25%">
      <img src="thiIsImage1.jpg">
      <p style ="text-align:center;  ">Message</p>
    </div>
    
    <div  style = "heigh:25%; width:25%">
      <img src="thisIsImage2.jpg">
      <p style ="text-align:center;  ">Message</p>    
      </div>
      
   <div  style = "heigh:25%; width:25%">
      <img src="thisIsImage3.jpg">
       <p style ="text-align:center;  ">Message</p>
       
    </div>
  </div>
  </body>
</html>