CSS/HTML Question: How can you center a div with images inside?

L

LUIGI

New member
So have a couple of images, each with their own ID. Inside each ID, I put in some absolute coordinates. Now I want to move the entire div with the images inside to the center of the webpage so that it would coincide with a background image I centered. I put all the images in a div because I wanted to preserve their positions in relation to each other. Here's the html:

<div id="main">

<a href="Home.html"><img src="Buttons\GGBanner.png" alt="Home" name="homebanner" border="0" id="homebanner" /></a>
<img src="Buttons\PC Stream Link.png" alt="Listen to Green Giant FM - Windows" name="windows_link" border="0" id="windows_link" />
<img src="Buttons\MAC Stream Link.png" alt="Listen to Green Giant FM - MAC" name="mac_link" id="mac_link" />
<a href="AboutGG.html"><img src="Buttons\About GG Link.png" alt="About Green Giant FM" name="gg_link" border="0" id="gg_link" /></a>
<a href="Gallery.html"><img src="Buttons\Gallery Link.png" alt="Gallery" name="gallery_link" border="0" id="gallery_link" /></a>
<a href="DJ.html"><img src="Buttons\DJ Link.png" alt="DJs" name="dj_link" border="0" id="dj_link" /></a>
<a href="ProgramGuide.html"><img src="Buttons\Program Guide.png" alt="Program Guide" name="program_link" border="0" id="program_link" /></a>
<a href="ContactUs.html"><img src="Buttons\Contact Us Link.png" alt="Contact Us" name="contact_link" border="0" id="contact_link" /></a>

</div>




and here's the css:

#main
{
width: 50%;
margin-left:auto;
margin-right:auto;
}

#homebanner
{
position:absolute;
left:43px;
top:33px;
z-index:3;
}

#windows_link
{
position:absolute;
left:382px;
top:40px;
z-index:2;
}

#mac_link
{
position:absolute;
left:446px;
top:102px;
z-index:1;
}

#gg_link
{
position:absolute;
left:48px;
top:94px;
z-index:1;
}

#gallery_link
{
position:absolute;
left:42px;
top:290px;
z-index:3;
}

#dj_link
{
position:absolute;
left:82px;
top:276px;
z-index:2;
}

#program_link
{
position:absolute;
left:38px;
top:623px;
z-index:1;
}

#contact_link
{
position:absolute;
left:648px;
top:569px;
z-index:1;
}


Unfortunately, the div won't center. Can somebody help me with this?
 
Back
Top