将不同的段落放在 html5 中的 3 个图像下，使用一个类答案

【问题标题】：Put different paragraphs under 3 images in html5,using a class将不同的段落放在 html5 中的 3 个图像下，使用一个类
【发布时间】：2017-07-17 04:41:57
【问题描述】：

我有 3 张图片

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

现在，我想在 3 张图片下添加文字，文字应该居中。这将是 3 种不同的

。 3 张图片应该在一行上。

【问题讨论】：

我们可以将每个图像和文本包装在div 中吗？
@JithinRajPR 是的

标签： html css

【解决方案1】：

请试试这个代码：

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

从你的班级中删除左边距。如果不需要，那么。

【讨论】：

【解决方案2】：

您可以使用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>

【讨论】：

看起来不错，除了我需要在一行中放 3 张图像，但在 sn-p 中它们是一个在另一个之下
@Karina K 我已经编辑了我的答案。您可以通过向父元素添加 display: inline-block 或 flexbox 来水平对齐项目。

【解决方案3】：

您的 HTML：

<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

【讨论】：

不工作，文本在选项卡的左侧，不在图像下方/居中