html - Putting text underneath images in a list (with jQuery lightbox) -

html - Putting text underneath images in a list (with jQuery lightbox) -

right i've got big list of images utilize jquery lightbox plugin, formatted like:

<div id="gallery"><ul> <li><a href="photos/1.jpg"><img src="photos/1_t.jpg" width="72" height="72" alt="" /></a></li> <li><a href="photos/2.jpg"><img src="photos/2_t.jpg" width="72" height="72" alt="" /></a></li> <li><a href="photos/3.jpg"><img src="photos/3_t.jpg" width="72" height="72" alt="" /></a></li> <li><a href="photos/4.jpg"><img src="photos/4_t.jpg" width="72" height="72" alt="" /></a></li> <li><a href="photos/5.jpg"><img src="photos/5_t.jpg" width="72" height="72" alt="" /></a></li> </ul></div>

css:

#gallery { background-color: #efefef; border:1px solid #ccc; background-size: 100%; width: 90%; margin-top:20px; } #gallery ul { list-style: none; } #gallery ul li { display: inline; margin-left: 5px; margin-right: 5px; font-size:.4em; } #gallery ul img { border: 5px solid #3e3e3e; border-width: 2px 2px 2px; } #gallery ul a:hover img { border: 5px solid #fff; border-width: 2px 2px 2px; border-color: #8f8f8f; color: #fff; } #gallery ul a:hover { color: #fff; }

and i'm trying create there's caption text placed under each image. ex:

<li><a href="photos/1.jpg"> <img src="photos/1_t.jpg" width="72" height="72" alt="" /></a> image 1 </li>

but right i'm getting caption showing right of image. can't think of best way going doing this. help much appreciated.

i add-on <br> after image caption, utilize display: inline-block <li> elements rather display: inline.

http://jsfiddle.net/nfems/1/

jquery html css