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

Question

I want to place text underneath an image. I want to do this for 4 images that are placed in a row.

I've tried implementing a solution, here's the code I've written: http://pastebin.com/3rgYXKFL

Here's what this code produces: http://i.imgur.com/hWwWMlL.png

Even though this is a step in the right direction, I'm still not able to figure out exactly how to get the text below the image and place 4 images in a row (each having text below the image). Any suggestions on how to solve this?

Answer 1

Height and weight are better as CSS attributes,I would define them in a style="" . So height="176" and weight="201" should become style="height: 176px; width:201px" .

Unless there's a specific reason for using inline styles, I'd also suggest you put all your styles in a CSS file.

You could make all your images <img src="url" class="icon"> and then in CSS:

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

This way the only part you're repeating is the class bit, rather than having to set the style every time. If you want to change something, it makes it a lot simpler to make the change in one spot rather than every time for all 4 images.

Answer 2

Your question wasn't clear so this is the best answer I can give you at this moment. Use this code and it might be what you want.

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

A suggestion would be to please learn your HTML coding before asking questions like this question because your code contained many severe errors and seemed like you are almost completely new to HTML and didn't know what you were doing.