Hello,

I know basic css and html, but not much more than that. However, the site I am attempting to build is very simple, so hopefully someone here can help me stumble my way through the process.

Here is an example of what I want:


...and when I add new content:


I want a css grid of identical square containers, with a thumbnail in each one. The tricky part is getting the differently-sized thumbnails to be vertically centered in the containers without having to set each one by hand.

This is where I have gotten so far-
http://jimtierneyart.com/test/test.html

Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
        
<html>
	<head>
		<style type="text/css"> 
		
		body {
			margin : auto;
		}
		
		.wrapper {
			width: 900px;
			border: 1px solid #bbbbbb;
			margin: 50 auto;
		}
		
		.item {
			
			line-height: 223;
    		text-align: center;
    		float: left;
			width: 223px;
			height: 223px;
			border: 1px solid #dddddd;
			background: #EBEBEB;
		}
		
		img.a {
			margin: auto; 
			max-width:120px;  
			border:0; 
			max-height:175px; 
		}
		
		

</style>

		
		
		
	</head>

	<body>
		<div class="wrapper">

			header

			<BR>
			<BR>




			<div class="item">
			<img class="a" src="image.gif">
			</div>

			<div class="item">
			<img class="a" src="image.gif">
			</div>

			<div class="item">
			<img class="a" src="image.gif">
			</div>

			<div class="item">
			<img class="a" src="image.gif">
			</div>
			
				<div class="item">
			<img class="a" src="image.gif">
			</div>

			<div class="item">
			<img class="a" src="image.gif">
			</div>

			<div class="item">
			<img class="a" src="image.gif">
			</div>

			<div class="item">
			<img class="a" src="image.gif">
			</div>
			
			<div class="item">
			<img class="a" src="image.gif">
			</div>

			<div class="item">
			<img class="a" src="image.gif">
			</div>


		</div>
	</body>
</html>
I need 2 things to happen:

1. The parent container must be centered on the page (this worked fine until I added the Doctype tags.
2. the thumbnails must be vertically centered within the child containers.

Can anyone point me in the right direction?
I would really appreciate some help.