html - 使用CSS定位Flash内容

我正在设计一个网站，该网站的角落将有四个悬停按钮，中间有Flash内容：



我使用下面的代码正常工作的按钮：

HTML：

div.container { position:relative; }
img.positioned { position:absolute; height:63px; width:122px; }
img#topleft { top:0; left:0; }
img#topright { top:0; right:0; }
img#bottomleft { bottom:0; left:0; }
img#bottomright { bottom:0; right:0; }

CSS：

<div class="container">
<img src="image.gif" class="positioned" id="topleft">
<img src="image.gif" class="positioned" id="topright">
<img src="image.gif" class="positioned" id="bottomleft">
<img src="image.gif" class="positioned" id="bottomright">
</div>

但是我很难定位Flash内容。

用悬浮效果和Flash内容定位4个按钮的正确html和css代码是什么？

在此先感谢您的帮助。

最佳答案

假设您的Flash内容尺寸固定，则首先将其放入div中，然后将绝对位置设置为50％，并使用负边距。假设您的Flash内容为300x200。

HTML：

<div id="flashContainer">
    <object width="300" height="200" ...
</div>

CSS：

div#flashContainer {
    width:300px;
    height:200px;
    position:absolute;
    left:50%;
    top:50%;
    margin:-100px 0 0 -150px; /* half the width and height values */
}

关于html - 使用CSS定位Flash内容，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/7203288/