Question

对于我的网站，我有一个显示屏幕的图像。在屏幕内部，我在屏幕内移动了一个嵌入的YouTube视频。所以嵌入是在图像的顶部。我可以使用以下内容将嵌入的视频放到正确的位置：

<div style="position:relative"> 
  <img src="screen.png" />
  <div style="position:absolute; left:0px;top:0px;">    
    <embed src="http://www.youtube.com/embed/qoSEzTpbxP4" width="310" height="210" allowfullscreen=true"></embed>           
  </div>
</div>

我希望整个事物都集中在一起，但如果我用标签包围它，那么显然没有任何因为位置而居中;嵌入从窗口的左侧停留544，而不是从图像的左侧。有没有办法使嵌入移动与图像居中位置相匹配？

（注意：我知道我应该为所有样式使用单独的CSS文档，但我现在对此不感兴趣，我只是想让它工作然后我可能将样式封装到一个单独的地方后）

Answer 1

试试这个

<div style="margin: 0px auto; text-align: center; width: 500px; position: relative;"> 
  <img src="screen.png">
  <div style="position: absolute; z-index: 1; margin: 0px auto; text-align: center;">   
    <embed width="425" height="349" allowfullscreen="true&quot;" src="http://www.youtube.com/embed/qoSEzTpbxP4">           
  </div>
</div>

Answer 2

试试这个......好看的视频帧!!!

<object height="360" width="580" id="video_MT6UDIruUkU" type="application/x-shockwave-flash"
data="http://www.youtube.com/apiplayer?enablejsapi=1&version=3">

    <param value="always" name="allowScriptAccess">
    <param value="transparent" name="wmode">
    <param value="video_id=MT6UDIruUkU&playerapiid=MT6UDIruUkU"
    name="flashvars">
    <param value="http://www.youtube.com/apiplayer?enablejsapi=1&version=3"
    name="movie">

</object>

<div class="controlDiv play"></div>

HTML如何更改对象相对于另一个图像的位置

2 个答案: