CSS 如何在 div 标签中居中视频标签？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13033925/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to center video tag in a div tag?
提问by user1625756
I cannot seem to position this video tag with the usual "margin: 0px auto 0px auto;" Help lads! Thanks for looking into this!
我似乎无法使用通常的“margin: 0px auto 0px auto;”来定位这个视频标签。帮助小伙子们！感谢您查看这个！
#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;
}
and html and explaining my scenario as requested :
和 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&controls=true&loop=true&src=trailer.mp4" allowFullScreen="true" wmode="transparent" type="application/x-shockwave-flash" pluginspage="http://www.adobe.com/go/getflashplayer_en" />
</video>
</div>
</div>
回答by Code Monkey
Actually, html5 videos as well as images count as text when it comes to stylesheets. So, the only changes you would have to make would be in your css code. Using the <div id="video>tag you wrapped the video with, all you would have to add is:
实际上，对于样式表，html5 视频和图像都算作文本。因此，您必须进行的唯一更改是在您的 css 代码中。使用<div id="video>包装视频的标签，您只需添加：
#video {
text-align: center;
//rest of rules here
}
instead of playing with margins all day.
而不是整天玩保证金。
回答by Dziamid
If you do not know your video's with you can still center it using css transforms:
如果你不知道你的视频，你仍然可以使用 css 转换将它居中：
video {
position: relative;
left: 50%;
transform: translateX(-50%);
}
回答by Dennis Traub
You must set margin: 0 autoon the surrounding <div id="video">, not the <video>tag:
您必须设置margin: 0 auto周围的<div id="video">，而不是<video>标签：
#video {
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
border: 1px solid #009;
}
instead of
代替
#wrapper #trailer video {
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
border: 1px solid #009;
}
回答by thatidiotguy
You need to set a width on the video div in order for margin: 0 auto; to work correctly.
您需要在视频 div 上设置宽度才能margin: 0 auto；正常工作。
回答by Samudrala Ramu
//Try This
#parant{
width:100%;
height:300px;
text-align:center;
}
#video{
width:100px;
height:100px;
margin:auto;
}
}
