[RESOLVED] centering anchor image nested inside 3 col div

I am trying to dynamically pull up images from a database (using PHP), but then force the images into a 3 column layout, so that the fourth image will be on the next line down, just below image 1. The problem is that I am also trying to have the images centered inside a background image

[code=html]<div class=”display_case”>
<div class=”items”>
<a href=”url1″><img src=”url1″ /></a>
</div>
<div class=”items”>
<a href=”url2″><img src=”url2″ /></a>
</div>
<div class=”items”>
<a href=”url3″><img src=”url3″ /></a>
</div>
<div class=”items”>
<a href=”url4″><img src=”url4″ /></a>
</div>
</div><!– end of .display_case –>[/code]

[CODE].display_case{
max-width: 570px;
}
.items{
background-image: url(../images/boxbkg.jpg);
background-repeat: no-repeat;
background-position:center;
}[/CODE]

The background image is 175px by 175px. The images I am pulling from the database are smaller (usually 150 by 150), but they are not all the same size and I am trying to center them.

No matter what I try I either get:

the images centered but not contained within the display_case div (the fourth .items div will be to the right of #3, instead of below #1)

or

the fourth .items div will be placed correctly, but then the images are no longer centered in relation to the background image.

I have been tearing my hair out on this one. I kept hacking away at my CSS until it looked like a nightmare. Any help on this one is greatly appreciated!

Also in #CSS _↴