I have 4 images I want to be side by side (not so close, say 25%,25%,etc.. each to equal 100% to fit the width of the page) in the middle of my page.

All I've been able to do is put them in frames to get them side by side. I don't know how to move them. I don't have a style sheet, and if I did I'd need to know where to put what.

Here's what my code is like.

Code:
<html> 
<HEAD>
<TITLE>SITE TITLE</TITLE>
<style type="text/css">frameset, p {background:black}</style>
</HEAD>

<frameset cols="25%,25%,25%,25% "border="0" frameborder="0" framespacing="0" noresize="noresize" scrolling="no">
  <frame src="/images/1.png"/>
  <frame src="/images/2.png"/>
  <frame src="/images/3.png"/>
  <frame src="/images/4.png"/>
</frameset>

<noframes></noframes>

</html>

This puts all the images side by side how I want, but at the top of the screen. I want them to be in the center, regardless of whatever someone's resolution is. How do I do this?