如何使用 CSS 在图像下方放置文本？答案

【问题标题】：How do I place text underneath an image with CSS?如何使用 CSS 在图像下方放置文本？
【发布时间】：2016-10-04 00:19:23
【问题描述】：

我想在图片下方放置文字。我想对连续放置的 4 张图像执行此操作。

我已经尝试实施一个解决方案，这是我编写的代码： http://pastebin.com/3rgYXKFL

以下是这段代码产生的结果： http://i.imgur.com/hWwWMlL.png

尽管这是朝着正确方向迈出的一步，但我仍然无法准确弄清楚如何获取图像下方的文本并将 4 个图像连续放置（每个图像下方都有文本）。有关如何解决此问题的任何建议？

【问题讨论】：

嗨 @Ryan，请发布一个最小、完整和可验证的示例 - stackoverflow.com/help/mcve
您能否将您正在使用的代码放入 Codepen 或类似设备中，以便我们查看您正在使用的内容并提供答案：)

标签： html css image text formatting

【解决方案1】：

您的问题不清楚，所以这是我目前可以给您的最佳答案。使用此代码，它可能是您想要的。

<img src="images/modules/Logomakr_1dOe2g.png" width="201px" height="198px"/>
<br />
<p style="font-size:36px; margin-left:2.5%; margin-top:0; margin-bottom:0;">Engineering</p>
<p style="font-size:24px; margin-top:0;">Text Goes Here</p>
<br />
<br />
<img src="images/modules/Logomakr_2VsRmD.png" width="201px" height="198px"/>
<p style="font-size:36px; margin-left:2.5%; margin-top:0; margin-bottom:0;">Buisness</p>
<p style="font-size:24px; margin-top:0;">Text Goes Here</p>

建议您在提出此类问题之前先了解您的 HTML 编码，因为您的代码包含许多严重错误，并且您似乎对 HTML 几乎是全新的并且不知道自己在做什么。

【讨论】：

重要的是要了解许多访问此网站的人都是手头主题的新手。

【解决方案2】：

高度和重量作为 CSS 属性更好，我会在 style="" 中定义它们。所以height="176" 和weight="201" 应该变成style="height: 176px; width:201px"。

除非有特定原因使用内联样式，否则我还建议您将所有样式放在 CSS 文件中。

您可以将所有图片设为<img src="url" class="icon">，然后在 CSS 中：

.icon {
  height: 176px;
  width: 201px;
}

这样，您重复的唯一部分就是类位，而不必每次都设置样式。如果您想更改某些内容，只需在一个位置进行更改，而不是每次都更改所有 4 张图像。

【讨论】：