PDA

View Full Version : css vertical align


jerryjones
March 19th, 2007, 04:29 PM
i know that there are lots of examples about vertical centering, but mine doesnt seem to be working. could anybody tell me what i am doing wrong? i want to vertically center a 700x525 swf. i'd like to do it with css (because i want to learn it in the near future), but i don't know much about it right now.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Center Testing</title>
<style>
body
{
text-align: center;
background-color: #ffffff;
}

.centerdiv
{
width:700px;
height:525px;
position:absolute;
top:50%;
left:50%;
margin:-262px auto auto -350px;
}
</style>
</head>

<script type="text/javascript" src="swfobject.js"></script>

<body>
<div id="centerdiv">
<div id="flashcontent"> <!-- this is where the alternative content goes -->

</div>
</div>
</body>


<script type="text/javascript">
var so = new SWFObject("testing.swf", "testing", "700", "525", "7", "#ffffff");
so.write("flashcontent"); <!-- writes to flashcontent...if the user has flash, it replaces all the alternative content -->
</script>

</body>
</html>
kBisk
March 19th, 2007, 04:36 PM
.centerdiv refers to a class, rather than a div. To apply styles to a div, you must use "#" instead of "."

so you css would look like this:

#centerdiv
{
width:700px;
height:525px;
position:absolute;
top:50%;
left:50%;
margin:-262px auto auto -350px;
}
jerryjones
March 19th, 2007, 05:36 PM
thank you so much...works like a charm! :)
jerryjones
March 20th, 2007, 01:32 AM
while i did get the flash content working fine, i ran into a bit of a problem when putting the alternative content in...stuff inside <div id="flashcontent">...the text centers horizontally but not vertically...but it seems to be having the same settings applied that the flash swf does. why isn't the alt content text vertically centered too?
Icy Penguin
March 20th, 2007, 04:00 AM
I'm guessing you would set the margin to auto on all four sides, just a hunch though.

Also, just to clarify what kBisk said (don't know if he said what he meant), '.' always refers to classes, and '#' refers to IDs, not just divs. :)
jerryjones
March 20th, 2007, 10:21 AM
thanks for clearing that up icy penguin.
i tried to set the margin to auto on all sides but it didn't seem to eb working :(
kBisk
March 20th, 2007, 05:09 PM
only the centerdiv is being aligned vertically. Any contents inside that div will still be at the top of the div, unless you give the centerdiv top padding, or vertically align the flashcontent div using the same method...
phlegma
February 4th, 2008, 01:04 AM
maybe i'm dumb, but why wouldn't this work. seems fine in safari and IE...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>blank</title>
<meta name="keywords" content="blank">
<meta name="description" content="blank">
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<style type="text/css">
<!--
body {
background-color: #000000;
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
body,td,th {
color: #FFFFFF;
}
-->
</style>
</head>
<body>
<table width="100%" height="100%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td><div align="center">center
</div></td>
</tr>
</table>
</body>
</html>