Fixed: How to center an image in CSS?

[Appledrop]

!FIXED!

hi, i have a slight problem with my Cascading Style Sheet learning!

I have this website:- http://www.carubansystems.com/stx

I want to position the purple image into the center of the page...

I CAN do it by changing this portion of code:-
#logo {
width:480px;
height:80px;
position:absolute;
top:0px;
}
to look like this :-
#logo {
width:480px;
height:80px;
position:absolute;
top:0px;
left:30%
}

BUT. this only centers it for my resolution of 1280x960.. if i switch to say 1024x768, it will not be centred, clearly...

Any suggestions? thanks!

i fixed it by changing it to :-
#logo {
width:480px;
height:80px;
position:relative;
top:-3.75%
}
and then by putting <div align="center" id="logo">IMG</div>
hehe!

 

[oog]

can't you add margin-left: auto and margin-right: auto to the image?

 

[Maverick2002]

I don't think you can keep an image centered using CSS if you have multiple resolutions. AFAIK you can specify a pixel position (such as 100 pixels from the left side) or a percentage position (such as 10% of screen width from the left side), but in CSS images positions are calculated from and edge of an image, not the center. Therefore, what may be centered in one resolution will be off at another. Does this make any sense? I could be wrong.