Html 如何将 HTML5 视频居中？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5879209/
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 HTML5 Videos?
提问by snowBlind
I'm just messing around with some HTML5, and I was trying to center a video on the page. For some reason I can't get it to center. I've tried to add a class to the video tag itself, and I've wrapped the video in a separate div. However, the video stays on the left.
我只是在搞一些 HTML5，我试图将视频放在页面的中心。出于某种原因，我无法让它居中。我尝试向视频标签本身添加一个类，并将视频包装在单独的div. 但是，视频保留在左侧。
<!DOCTYPE HTML>
<html>
<head>
<title>Test</title>
<script type="text/css">
.center {
margin: 0 auto;
}
</script>
</head>
<body>
<div class="center">
<video controls="controls">
<source src="/media/MVI_2563.ogg" type="video/ogg" />
Your browser does not support the video tag.
</video>
</div>
</body>
</html>
I know this must be something I'm overlooking in the wee hours of the morning, but any help would be appreciated.
我知道这一定是我在凌晨时分忽略的东西，但任何帮助将不胜感激。
Thanks
谢谢
采纳答案by djpMusic
The center class must have a width in order to make auto margin work:
中心类必须有一个宽度才能使自动边距工作：
.center { margin: 0 auto; width: 400px; }
Then I would apply the center class to the video itself, not a container:
然后我会将中心类应用于视频本身，而不是容器：
<video class='center' …>…</video>
回答by djpMusic
I was having the same problem, until I realized that <video>elements are inline elements, not block elements. You need only set the container element to have text-align: center;in order to center the video horizontally on the page.
我遇到了同样的问题，直到我意识到<video>元素是内联元素，而不是块元素。您只需要设置容器元素即可text-align: center;将视频水平居中放置在页面上。
回答by badr
HTML CODE:
HTML代码：
<div>
<video class="center" src="vd/vd1.mp4" controls poster="dossierimage/imagex.jpg" width="600">?</video>
</div>
CSS CODE:
代码：
.center {
margin-left: auto;
margin-right: auto;
display: block
}
回答by mehulmpt
Do this:
做这个：
<video style="display:block; margin: 0 auto;" controls>....</video>
Works perfect! :D
工作完美！:D
回答by Juan Ignacio Avenda?o Huergo
I will not prefer to center just using video tag as @user142019 says. I will prefer doing it like this:
我不会像@user142019 所说的那样只使用视频标签来居中。我更喜欢这样做：
.videoDiv
{
width: 70%; /*or whatever % you prefer*/
margin: 0 auto;
display: block;
}<div class="videoDiv">
<video width="100%" controls>
<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
<source src="https://www.w3schools.com/html/mov_bbb.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
</div>This will make your video responsive at the same time the panel for controls will have the same size as the video rectangle (I tried what @user142019 says and the video was centered, but it looked ugly in Google Chrome).
这将使您的视频具有响应性，同时控件面板将具有与视频矩形相同的大小（我尝试了 @user142019 所说的并且视频居中，但它在 Google Chrome 中看起来很丑陋）。
回答by user1399749
I was having the same problem. This worked for me:
我遇到了同样的问题。这对我有用：
.center {
margin: 0 auto;
width: 400px;
**display:block**
}
回答by nikkor
Try this:
尝试这个：
video {
display:block;
margin:0 auto;
}
回答by nikkor
@snowBlind In the first example you gave, your style rules should go in a <style> tag, not a <script> tag:
@snowBlind 在您给出的第一个示例中，您的样式规则应该放在 <style> 标签中，而不是 <script> 标签中：
<style type="text/css">
.center {
margin: 0 auto;
}
</style>
Also, I tried the changes that were mentioned in this answer(see results at http://jsfiddle.net/8cXqQ/7/), but they still don't appear to work.
此外，我尝试了此答案中提到的更改（请参阅http://jsfiddle.net/8cXqQ/7/ 上的结果），但它们似乎仍然不起作用。
You can surround the video with a div and apply width and auto margins to the div to center the video (along with specifying width attribute for video, see results at http://jsfiddle.net/8cXqQ/9/).
您可以用 div 包围视频，并将宽度和自动边距应用到 div 以将视频居中（同时指定视频的宽度属性，请参阅http://jsfiddle.net/8cXqQ/9/ 上的结果）。
But that doesn't seem like the simplest solution...shouldn't we be able to center a video withouthaving to wrap it in a container div?
但这似乎不是最简单的解决方案......我们不应该能够将视频居中而不必将其包装在容器 div 中吗？
回答by Renato Lazaro
Use margins <video>is an inline element so you'll have to add display block;to your cssclass.
使用边距<video>是一个内联元素，因此您必须添加display block;到您的css类中。
You can use specific with, but I wouldn't use px values. Use % to make it responsive, like:
您可以使用 specific with，但我不会使用 px 值。使用 % 使其响应，例如：
width: 50%;
That'll make the video half of the viewport width.
这将使视频视口宽度的一半。
See the original documentation here O World Wide Web Consortium W3C
请参阅此处的原始文档 O 万维网联盟W3C
mystyle.css
mystyle.css
video {
width: 50% !important;
height: auto !important;
margin: 0 auto;
display: block;
}
h1 {
text-align: center;
color: #C42021;
font-size: 20px;
}<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test</title>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
<h1>
How do you center a video
</h1>
<div class="center">
<video controls="controls">
<source src="https://repositorio.ufsc.br/xmlui/bitstream/handle/123456789/100149/Vídeo%20convertido.mp4" type="video/mp4" />
</video>
</div>
</body>
</html>See the code ready here for more understanding.
请参阅此处准备好的代码以获取更多理解。
回答by Moose-Anne Squirrel
I had a similar problem in revamping a web site in Dreamweaver. The site structure is based on a complex set of tables, and this video was in one of the main layout cells. I created a nested table just for the video and then added an align=centerattribute to the new table:
我在 Dreamweaver 中改造网站时遇到了类似的问题。站点结构基于一组复杂的表格，该视频位于一个主要布局单元格中。我为视频创建了一个嵌套表，然后向align=center新表添加了一个属性：
<table align=center><tr><td>
<video width=420 height=236 controls="controls" autoplay="autoplay">
<source src="video/video.ogv" type='video/ogg; codecs="theora, vorbis"'/>
<source src="video/video.webm" type='video/webm' >
<source src="video/video.mp4" type='video/mp4'>
<p class="sidebar">If video is not visible, your browser does not support HTML5 video</p>
</video>
</td></tr></table>
