Html 如何使文本正好位于图像下方

我创建了一个html，如下所示

---

试试这个简单的表格对齐

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

---

只需按照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 */
}

注意我们将a作为目标，因为在本例中，它分别是图像和p的父对象。

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

我在图像下面

HTML5解决方案

---

另请参见本帖

请添加css代码，并使用{display:inline block；width:100px；text align:center}为什么建议使用表格？