Okay, here's an example...
Code:
<ul class="ImageGrid">
<li>
<a href="http://www.authorwebpage.com/Book_1.html">
<img alt="Title of Book 1" src="images/book1.png" />
</a>
<br />
Book 1 Caption
</li>
<li>
<a href="http://www.authorwebpage.com/Book_2.html">
<img alt="Title of Book 2" src="images/book2.png" />
</a>
<br />
Book 2 Caption
</li>
<li>
<a href="http://www.authorwebpage.com/Book_3.html">
<img alt="Title of Book 3" src="images/book3.png" />
</a>
<br />
Book 3 Caption
</li>
</ul>
... with the following CSS:
Code:
/*horizontal list of images*/
ul.ImageGrid {
list-style-type:none;
float:none;
text-align: center;
margin:0;
padding:0;
border:0px solid;
}
ul.ImageGrid li {
display:inline;
}
Adjust the margin and padding as it suits you.
Each such
<ul> will produce what is effectively a "row" of images with a caption. Add as many "cells" as you need by adding additional
<li> elements.
I think it should work -- but I haven't tested it yet in this application, just my navigation links, where it works properly (but without captions.)