0

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.

Karina Kozarova
  • 1,145
  • 3
  • 14
  • 29

3 Answers3

1

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.

Emipro Technologies Pvt. Ltd.
  • 14,598
  • 5
  • 45
  • 75
0

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

zekromWex
  • 280
  • 1
  • 4
  • 17
0

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>
Rich
  • 3,156
  • 3
  • 19
  • 29
  • Looks good, except that I need the 3 images on one row but in the snippet they are one under another – Karina Kozarova Jul 17 '17 at 04:55
  • @Karina K I've edited my answer. You can align the items horizontally by adding a display: inline-block or flexbox to the parent element. – Rich Jul 17 '17 at 04:59