A final solution, can be found on Phrogz's site, here. In collaboration, we constructed a compass-oriented set of classes. By default, all the images would be aligned in the dead-center of the box.
While that solution is good, this one is a bit easier to understand. First, this is the end result:
The HTML code is straight-forward. Each image is given a class made up of two classes: a position vertically and a position horizontally. The "magic" is thus in the classes themselves.
The code is included below:
One note, the reason that the middle and center classes require a negative margin is to get the "center" of the image at the centered position. Notice that the images are 16px wide. Using the centering positioning, the center would be at the top or left of the image. without it.
/* this is the container, you can specify height and width too */
#map {
width:60%;
height: 300px;
margin: 0 auto;
position:relative;
border:1px dotted #c60;
background-color:#dca
}
#map img
{ position:absolute; width:16px; height:16px }
.top { top: 0; }
.right { right: 0; }
.left { left: 0; }
.bottom { bottom: 0; }
.middle { top: 50%; margin-top: -8px; }
.center { left: 50%; margin-left: -8px; }