1

我在使用一些非常基本的 html 时遇到了一些麻烦。我正在尝试将嵌入的视频居中到电视屏幕图像的中心。整个代码如下，

<!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=utf-8" />
<title>PLAYTHEGAME</title>
<style type="text/css">

body {
 background-color: #000;
}
#test {
width: 1200px;
position: relative;
left : 50%;
top:auto;
margin-left: -600px;
z-index:2;
}
#video{
    margin-top:-925px;
    margin-left:-13px;
}
</style>

</head> 

<body>

    <div class="test"> <div align="center"> 
        <img src="https://dl.dropbox.com/u/34669221/2323232.png" border="0" />
    </div>
</body>
<div id="video"><div align="center"> <iframe src="http://player.vimeo.com/video/62981335?title=0&amp;byline=0&amp;portrait=0&amp;color=0d0d0d&amp;autoplay=1&amp;loop=1" width="740" height="420" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe></div>

主要问题是当您放大或缩小时，视频不再以电视屏幕图像为中心。请帮我定位视频和背景图像，使其在缩放或调整窗口大小时不移动。

 

4

4 回答 4

1
  1. test 是一个类，所以它是 .test
  2. 更喜欢 div 视频作为位置：绝对；
  3. 你忘记了“test”类的结束标签

这是整个代码

<!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=utf-8" />
<title>PLAYTHEGAME</title>
<style type="text/css">

body {
 background-color: #000;
}
.test {
width: 1200px;
position: relative;
left : 50%;
top:auto;
margin-left: -600px;
z-index:2;
}
#video{
position:absolute;
    top:14.5%;
    left:47.5%;
}
</style>

</head> 

<body>

    <div class="test"> <div align="center"> 
        <img src="https://dl.dropbox.com/u/34669221/2323232.png" border="0" />
    </div>
</body>
<div id="video">
<iframe src="http://player.vimeo.com/video/62981335?title=0&amp;byline=0&amp;portrait=0&amp;color=0d0d0d&amp;autoplay=1&amp;loop=1" width="740" height="420" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
</div>
</div>
于 2013-03-30T09:37:36.653 回答
1

如果你想把你的元素居中，有很多方法，下面是其中一种。

<div class="wrapper">
  <div class="videoWrapper">
       <img src="https://dl.dropbox.com/u/34669221/2323232.png" border="0" />

  </div>
</div>

.wrapper {
  float:left;
  width:100%;
}
.videoWrapper {
  width:500px; /* set your own width */
  margin:auto;
}
于 2013-03-30T09:43:45.977 回答
0

如果您的背景图像具有固定大小，您可以绝对定位#video。

jsFiddle

#video {
    position:absolute;
    left:577px;
    top:166px;
}

请注意，在我的小提琴中，我清理了您的 HTML，删除了多余的元素。

<div class="test">
    <img src="https://dl.dropbox.com/u/34669221/2323232.png" border="0" />
    <div id="video">
            <iframe src="http://player.vimeo.com/video/62981335?title=0&amp;byline=0&amp;portrait=0&amp;color=0d0d0d&amp;autoplay=1&amp;loop=1" width="740" height="420" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
    </div>
</div>
于 2013-03-30T09:25:47.763 回答
0

使用“中心”标签将您的视频置于中心位置

您还可以通过以下脚本根据屏幕分辨率设置上边距

<script type="text/javascript">
    $(document).ready(function(){
    var height = (($(window).height()) / 2) - 50;
    $('.video').css('top', height ); 
    });
<scrript>
于 2013-03-30T09:42:42.633 回答