how to make text exactly below image

Question

I have created a html like following

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

I want all the images to appear in a grid and also to have the text below the respective images. If the lenght of text is more than image then the text should continue in 2nd line. You can check what i exactly want in the below image. However in the image there is a separate background behind the text which is not much important to me.

Image is available @ this link : http://imageart.webs.com/html%20output.png

Try with `a{display:inline-block; width: 100px; text-align:center}` — Vucko, Dec 10 '14 at 13:24

Sleek Geek · Answer 1 · 2014-12-12T16:11:13.333

1

Just do something like what Vucko suggested since both the image and the p are wrapped inside an 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

Note We targeted a because it's in this case the parent to the image and p respectively.

edited Dec 12 '14 at 16:11

answered Dec 10 '14 at 13:31

Sleek Geek

4,638
3
27
42

score 0 · Answer 2 · answered Dec 10 '14 at 13:27

try this simple table 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>

why suggest the use of table? – Sleek Geek Dec 10 '14 at 13:40 — Sleek Geek, Dec 10 '14 at 13:40

score 0 · Answer 3 · edited May 23 '17 at 11:56

0

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

HTML 5 solution http://www.w3schools.com/tags/tag_figcaption.asp

See also this post How to align caption underneath image

edited May 23 '17 at 11:56

Community

1
1

answered Dec 10 '14 at 13:45

Michelangelo

5,888
5
31
50

how to make text exactly below image

3 Answers3