如何使文本正好在图像下方

Question

我已经创建了一个像下面这样的html

<a href="http://google.com">
  <img src="C:\Users\HOME\Desktop\maxresdefault.jpg" width="100" height="100">
  <p style="clear: both;">text in the pararaph is created using html</p>
</a>
<a href="http://google.com">
  <img src="C:\Users\HOME\Desktop\maxresdefault.jpg" width="100" height="100">
  <p style="clear: both;">text in the pararaph is created using html</p>
</a>
<a href="http://google.com">
  <img src="C:\Users\HOME\Desktop\maxresdefault.jpg" width="100" height="100">
  <p style="clear: both;">text in the pararaph is created using html</p>
</a>
<a href="http://google.com">
  <img src="C:\Users\HOME\Desktop\maxresdefault.jpg" width="100" height="100">
  <p style="clear: both;">text in the pararaph is created using html</p>
</a>
<a href="http://google.com">
  <img src="C:\Users\HOME\Desktop\maxresdefault.jpg" width="100" height="100">
  <p style="clear: both;">text in the pararaph is created using html</p>
</a>
<a href="http://google.com">
  <img src="C:\Users\HOME\Desktop\maxresdefault.jpg" width="100" height="100">
  <p style="clear: both;">text in the pararaph is created using html</p>
</a>
<a href="http://google.com">
  <img src="C:\Users\HOME\Desktop\maxresdefault.jpg" width="100" height="100">
  <p style="clear: both;">text in the pararaph is created using html</p>
</a>
<a href="http://google.com">
  <img src="C:\Users\HOME\Desktop\maxresdefault.jpg" width="100" height="100">
  <p style="clear: both;">text in the pararaph is created using html</p>
</a>
<a href="http://google.com">
  <img src="C:\Users\HOME\Desktop\maxresdefault.jpg" width="100" height="100">
  <p style="clear: both;">text in the pararaph is created using html</p>
</a>
<a href="http://google.com">
  <img src="C:\Users\HOME\Desktop\maxresdefault.jpg" width="100" height="100">
  <p style="clear: both;">text in the pararaph is created using html</p>
</a>
<a href="http://google.com">
  <img src="C:\Users\HOME\Desktop\maxresdefault.jpg" width="100" height="100">
  <p style="clear: both;">text in the pararaph is created using html</p>
</a>
<a href="http://google.com">
  <img src="C:\Users\HOME\Desktop\maxresdefault.jpg" width="100" height="100">
  <p style="clear: both;">text in the pararaph is created using html</p>
</a>
<a href="http://google.com">
  <img src="C:\Users\HOME\Desktop\maxresdefault.jpg" width="100" height="100">
  <p style="clear: both;">text in the pararaph is created using html</p>
</a>
<a href="http://google.com">
  <img src="C:\Users\HOME\Desktop\maxresdefault.jpg" width="100" height="100">
  <p style="clear: both;">text in the pararaph is created using html</p>
</a>

我希望所有图像都显示在网格中，并且在相应图像下方显示文本。如果文本的长度超过图像，则文本应在第二行继续。您可以在下图中检查我到底想要什么。然而，在图像中，文本后面有一个单独的背景，这对我来说并不重要。

图片可用@此链接：http://imageart.webs.com/html%20output.png

Answer 1

只需像 Vucko 建议的那样做，因为图像和 p 都包含在 a 中

a { 
 display:inline-block; /* Aligns them side by side */
 width: 100px; /* You need a fixed width */
 margin: 0 10px 10px 0; /* Just for spaces */
}

See working example here

注意我们定位到 a 是因为在这种情况下它分别是图像和 p 的父级。

Answer 2

试试这个简单的表格对齐..

 <table width="100%">
    <tr><td>
    <a href="http://google.com">
      <img src="C:\Users\HOME\Desktop\maxresdefault.jpg" width="100" height="100">
      <p style="clear: both;">text in the pararaph is created using html</p>
    </a></td>
    <td>
    <a href="http://google.com">
      <img src="C:\Users\HOME\Desktop\maxresdefault.jpg" width="100" height="100">
      <p style="clear: both;">text in the pararaph is created using html</p>
    </a></td>
    <td>
    <a href="http://google.com">
      <img src="C:\Users\HOME\Desktop\maxresdefault.jpg" width="100" height="100">
      <p style="clear: both;">text in the pararaph is created using html</p>
    </a></td>
    </tr>
    <tr>
    <td>
    <a href="http://google.com">
      <img src="C:\Users\HOME\Desktop\maxresdefault.jpg" width="100" height="100">
      <p style="clear: both;">text in the pararaph is created using html</p>
    </a></td>
    <td>
    <a href="http://google.com">
      <img src="C:\Users\HOME\Desktop\maxresdefault.jpg" width="100" height="100">
      <p style="clear: both;">text in the pararaph is created using html</p>
    </a></td>
    <td>
    <a href="http://google.com">
      <img src="C:\Users\HOME\Desktop\maxresdefault.jpg" width="100" height="100">
      <p style="clear: both;">text in the pararaph is created using html</p>
    </a></td>
    </tr>
    <tr>
    <td>
    <a href="http://google.com">
      <img src="C:\Users\HOME\Desktop\maxresdefault.jpg" width="100" height="100">
      <p style="clear: both;">text in the pararaph is created using html</p>
    </a></td>
    <td>
    <a href="http://google.com">
      <img src="C:\Users\HOME\Desktop\maxresdefault.jpg" width="100" height="100">
      <p style="clear: both;">text in the pararaph is created using html</p>
    </a></td>
    <td>
    <a href="http://google.com">
      <img src="C:\Users\HOME\Desktop\maxresdefault.jpg" width="100" height="100">
      <p style="clear: both;">text in the pararaph is created using html</p>
    </a></td>
    </tr>
    <tr>
    <td>
    <a href="http://google.com">
      <img src="C:\Users\HOME\Desktop\maxresdefault.jpg" width="100" height="100">
      <p style="clear: both;">text in the pararaph is created using html</p>
    </a></td>
    <td>
    <a href="http://google.com">
      <img src="C:\Users\HOME\Desktop\maxresdefault.jpg" width="100" height="100">
      <p style="clear: both;">text in the pararaph is created using html</p>
    </a></td>
    <td>
    <a href="http://google.com">
      <img src="C:\Users\HOME\Desktop\maxresdefault.jpg" width="100" height="100">
      <p style="clear: both;">text in the pararaph is created using html</p>
    </a></td>
    </tr>
    <tr>
    <td>
    <a href="http://google.com">
      <img src="C:\Users\HOME\Desktop\maxresdefault.jpg" width="100" height="100">
      <p style="clear: both;">text in the pararaph is created using html</p>
    </a></td>
    <td>
    <a href="http://google.com">
      <img src="C:\Users\HOME\Desktop\maxresdefault.jpg" width="100" height="100">
      <p style="clear: both;">text in the pararaph is created using html</p>
    </a></td>
    </tr>
    </table>

Answer 3

<figure>
<img scr='#'>
<figcaption>I am under the image</figcaption>
</figure>

HTML 5 解决方案http://www.w3schools.com/tags/tag_figcaption.asp

另请参阅此帖子How to align caption underneath image