как сделать текст точно под изображением

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>

Я хочу, чтобы все изображения появляются в сетке, а также иметь текст ниже соответствующих изображений , Если длина текста больше, чем изображение, текст должен продолжаться во 2-й строке. Вы можете проверить, что я точно хочу на изображении ниже. Однако на изображении есть отдельный фон за текстом, который для меня не так важен.

Изображение доступно @ ссылке: http://imageart.webs.com/html%20output.png

Answer 1

попробовать этот простой стол Align ..

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

Просто сделать что-то вроде того, что Vučko предложил, так как образ и р завернуты внутри

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

Примечание Мы нацелились на то, что в этом случае родительский образ и p соответственно.

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