Here's a file you can play with to get it how you like it:
Code:
<html>
<head>
<title>test<title>
<style>
<!--
/*horizontal list of images*/
ul.ImageGrid {
list-style-type:none;
float:none;
text-align: center;
margin:0;
padding:0;
border:0;
}
ul.ImageGrid li {
display:inline;
margin: 0 1em 0;
}
-->
</style>
</head>
<body>
<ul class="ImageGrid">
<li><a href="http://www.authorwebpage.com/Book_1.html"><img alt="Title of Book 1" src="images/book1.png" /></a></li><li><a href="http://www.authorwebpage.com/Book_2.html"><img alt="Title of Book 2" src="images/book2.png" /></a></li><li><a href="http://www.authorwebpage.com/Book_3.html"><img alt="Title of Book 3" src="images/book3.png" /></a></li>
</ul>
</body>
</html>
Note the collapsed structure to avoid gaps, and the margin in the LI elements to produce controlled ones. Supply your own PNGs in your own
images folder.