在html5中,使用类将不同的段落放在3个图像下

请尝试以下代码:

Html:

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

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

从你们班上去掉左边的空白。如果不需要,则。

您可以使用 figcaption 标签,其确切目的是:

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>

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

您的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