Attempting to use CSS top property on a SWF file, but it's not working
I'm trying to position my Flex app so that it's further down the page, but I can't get it working. It's still appearing in the top left. Here is the HTML, any help would be greatly appreciated!
<html lang="en">
<head>
<title>Page</title>
<style type="text/css">
body { margin: 0px; overflow: hidden; }
#swf {top:50%;}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>
<script type="text/javascript">
swfobject.embedSWF( "link_to_the_swf", "swf", "100%", "100%", "10.0.0", "playerProductInstall.swf", flashVars, params );
</script>
</head>
<body scroll="no">
<div id="swf">
<p>Alternative content</p>
</div>
</body>
</html>
EDIT: After reading this message, I tried wrapping t开发者_Go百科he swf div in another one and setting the top property on the parent div, but it didn't work.
You can't use top
alone. You need to give the div
either position: relative
or use margin-top
/ padding-top
.
top requires a positioning other than static, which is the default. Try:
#swf {position:relative; top:50%;}
However, if you want to put it in the middle of a large container and have it centered instead of starting at the middle and going down you could do:
#swf {margin-top: auto; margin-bottom: auto;}
Try giving body position: relative
. Then add position: absolute
(or relative
I suppose) to #swf
Try giving the body a height as well. Something like body { height: 100%; }
精彩评论