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

Question

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

我试过实现一个解决方案，这是我写的代码： http : //pastebin.com/3rgYXKFL

这是此代码产生的内容： http : //i.imgur.com/hWwWMlL.png

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

Answer 1

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

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

你可以让你的所有图像<img src="url" class="icon">然后在 CSS 中：

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

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

Answer 2

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

<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 几乎完全陌生并且不知道自己在做什么。