CODEWITHSUNDEEP
htmlcss
Karina Kozarova
Karina Kozarova

Reputation: 1215

Put different paragraphs under 3 images in html5,using a class

I have 3 images

HTML:

<img src="cal.png" alt = "calendar" class="info">
<img src="location.png" alt = "location" class="info">
<img src="time.png" alt = "clock" class="info">

CSS:

.info{
    height: 15%;
    align-content: center;
    padding-left: 20%;
}

Now, I want to add text under the 3 images, the text should be centered. It will be 3 different

. The 3 images should be on one line.

Upvotes: 0

Views: 1003

Answers (3)

Rich
Rich

Reputation: 3336

You can use the figcaption tag, which is meant for this exact purpose:

div figure {
  display: inline-block;
}

.info {
  height: 15%;
  text-align: center;
}
<div>
  <figure>
    <img src="http://via.placeholder.com/150x150" alt="calendar" class="info">
    <figcaption class="info">Info about image one.</figcaption>
  </figure>
  <figure>
    <img src="http://via.placeholder.com/150x150" alt="location" class="info">
    <figcaption class="info">Info about image two.</figcaption>
  </figure>
  <figure>
    <img src="http://via.placeholder.com/150x150" alt="clock" class="info">
    <figcaption class="info">Info about image three.</figcaption>
  </figure>
</div>

Upvotes: 0

Emipro Technologies Pvt. Ltd.
Emipro Technologies Pvt. Ltd.

Reputation: 14746

Please try this code:

Html:

    <div class="div-test">
<img src="invoice_logo.png" alt = "calendar" class="info">
<div >YOUR TEXT</div>
</div>

css: 

 .info{
    height: 15%;
    align-content: center;
 }
 .div-test{text-align:center;}
 .div-test > span {clear:both;}

From your class remove margin left.If not required then.

Upvotes: 1

zekromWex
zekromWex

Reputation: 290

Your HTML:

<div class="img-with-text">
    <img src="yourimage.png" alt="sometext" />
    <p>Some text</p>
</div>

Your CSS:

.img-with-text {
    text-align: justify;
    width: [width of img];
}

.img-with-text img {
    display: block;
    margin: 0 auto;
}

https://stackoverflow.com/a/1225242/6441416

https://stackoverflow.com/users/7173/jason

Upvotes: 0

Related Questions