Question

我在使用一些非常基本的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>

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

Answer 1

test是一个类，所以它是.test
更喜欢div视频位置：绝对的;
您忘记了“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>

Answer 2

如果你想让你的元素居中，有许多方法，其中一个是下面的..

<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;
}

Answer 3

如果你的背景图片有一个固定的大小，你可以绝对定位#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>

Answer 4

使用“中心”标记将视频置于中心位置

并且您还可以通过以下脚本

按照屏幕分辨率设置上边距

<script type="text/javascript">
    $(document).ready(function(){
    var height = (($(window).height()) / 2) - 50;
    $('.video').css('top', height ); 
    });
<scrript>

基本的html css定位

4 个答案: