Tuesday, July 29, 2008

centering horizontal and vertical using css

Here's another boring post so I don't forget this technique!
(I have left off "<" of tags so browsers do not read as html....


I have found this to work centering vertical and horizontal using css:

style title="Default" media="screen" type="text/css">
#center { position: absolute; top: 50%; width: 100%; height: 586px; overflow: visible }
#main { position: absolute; left: 50%; width: 854px; margin-left: -427px; height: 5586px; top:-270px }
/style>

(I did adjust the absolute values according to my swf's dimensions)
_____________________________________________________________________________
I put my tiling body background image in the body tags:

style type="text/css">
body {
background-image: url('images/myImage.jpg');
background-repeat: repeat-x
background-repeat: repeat-y
}
/style>
_____________________________________________________________________________ Then I placed the div identifier tags below that...

div id="center">
div id="main">

(mySWFgoes in these tags)
don't forget to close the /div>s!

No comments: