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 つを以下に示します。

<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 に答える
1
  1. test はクラスなので、.test です。
  2. position:absolute; として 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 に答える
0

「center」タグを使用して、動画を中央に配置します

また、スクリプトに従って、画面解像度ごとに上部マージンを設定することもできます

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

背景画像のサイズが固定されている場合は、#video を絶対に配置できます。

jsフィドル

#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 に答える