基本html css定位

我在使用一些非常基本的html時遇到了一些麻煩。我正在嘗試將嵌入式視頻集中到電視屏幕圖像的中心。整個代碼如下，基本html css定位

<!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>

主要問題是當你放大或縮小時，視頻不再居中到電視屏幕圖像。請幫助我定位視頻和背景圖像，以便在縮放或調整窗口大小時不移動。

來源

2013-03-30 user2089255

它已經在firefox中心了。沒有這樣的問題 – Nilesh

如果你的背景圖像具有固定的大小，你可以絕對定位＃部影片。

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-30 09:25:47

測試是一個類，因此它是。測試
喜歡的div視頻作爲位置：絕對;
您忘記階級「測試」的結束標記

這是整個代碼

<!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-30 09:37:36

使用「中心」標籤把自己的視頻居中

，你也可以按照屏幕分辨率設置頂部邊距，方法如下腳本

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

來源

2013-03-30 09:42:42

如果你想中心你的元素有很多種方法，其中之一就是下面這個..

<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-30 09:43:45 jhunlio

基本html css定位

回答

相關問題