如何將視頻標籤放在div標籤中？

我似乎無法使用通常的「margin：0px auto 0px auto;」來定位此視頻標籤幫助夥伴！感謝您查看這個！如何將視頻標籤放在div標籤中？

#wrapper #trailer { 
    position: absolute; 
    z-index: 3; 
    margin-top: 55px; 
    width: 987px; 
    height: 620px; 
    background-color: #000; 
    margin-right: auto; 
    margin-bottom: 0px; 
    margin-left: auto; 
    border: 1px solid #009; 
} 
#wrapper #trailer #close { 
    position: absolute; 
    z-index: 2; 
    top: 20px; 
    right: 231px; 
    cursor: pointer; 
} 
#wrapper #trailer video { 
     margin-top: 0px; 
    margin-right: auto; 
    margin-bottom: 0px; 
    margin-left: auto; 
    border: 1px solid #009; 
}

和HTML和解釋的要求我的情況：

<div id="trailer"> 
<img id="close" src="images/close.png" alt="close" /> 
<div id="video"> 
<video controls autoplay="autoplay" poster="video/trailer.jpg" width="600"  onclick="if(/Android/.test(navigator.userAgent))this.play();"> 
<source src="video/trailer.mp4" type="video/mp4" /> 
<source src="video/trailer.webm" type="video/webm" /> 
<source src="video/trailer.ogv" type="video/ogg" /> 
<embed src="video/flashfox.swf" width="600" height="480" flashVars="autoplay=true&amp;controls=true&amp;loop=true&amp;src=trailer.mp4" allowFullScreen="true" wmode="transparent" type="application/x-shockwave-flash" pluginspage="http://www.adobe.com/go/getflashplayer_en" /> 
</video> 
</div> 
</div>

來源

2012-10-23 user1625756

你需要設置上，以視頻爲DIV一個margin: 0 auto寬度;正常工作。

來源

2012-10-23 15:27:59 thatidiotguy

您必須對周圍<div id="video">設置margin: 0 auto，而不是<video>標籤：

#video { 
    margin-top: 0px; 
    margin-right: auto; 
    margin-bottom: 0px; 
    margin-left: auto; 
    border: 1px solid #009; 
}

，而不是

#wrapper #trailer video { 
    margin-top: 0px; 
    margin-right: auto; 
    margin-bottom: 0px; 
    margin-left: auto; 
    border: 1px solid #009; 
}

來源

2012-10-23 15:33:31

事實上，HTML5視頻以及圖像，計數爲文本，當涉及到樣式表。所以，你必須做的唯一改變就是在你的css代碼中。使用<div id="video>標籤你包裹着的視頻，你就必須補充的是：

#video { 
    text-align: center; 
    //rest of rules here 
}

，而不是與利潤率玩了一整天。

來源

2012-10-23 15:36:40

如果你不知道你的視頻與您可以使用CSS它仍然爲中心轉變：

video { 
    position: relative; 
    left: 50%; 
    transform: translateX(-50%); 
}

來源

2016-08-11 09:05:43 Dziamid

我想指出的是，如果你不知道預先錄製視頻的尺寸，這是我發現的唯一解決方案。所有其他解決方案都需要固定大小的視頻元素。 – Rabbit

//Try This 
#parant{ 
width:100%; 
height:300px; 
text-align:center; 
} 
#video{ 
width:100px; 
height:100px; 
margin:auto;

}

來源

2016-08-11 09:09:00

雖然這段代碼可能有助於解決問題，但它並沒有解釋_why_和/或_how_它是如何回答問題的。提供這種附加背景將顯着提高其長期價值。請[編輯]您的答案以添加解釋，包括適用的限制和假設。 –

如何將視頻標籤放在div標籤中？

回答

相關問題