如何集中HTML5视频？

我只是搞乱了一些HTML5，我试图在页面上放置一个视频。出于某种原因，我无法让它居中。我试图给视频标签本身添加一个类，并且我将视频包装在单独的div中。但是，视频停留在左侧。如何集中HTML5视频？

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

我知道这一定是我在上午凌晨忽略的东西，但任何帮助将不胜感激。

感谢

来源

2011-05-04 snowBlind

可能是你在我增加宽度的.center类 – sandeep 2011-05-04 06:03:00

中心类必须有一个宽度，以便使汽车利润率工作：

.center { margin: 0 auto; width: 400px; }

然后我会申请中心类视频本身，不是容器：

<video class='center' …>…</video>

来源

2011-05-04 06:12:00

定义的宽度。从div中删除类，并将其添加到视频标签。仍然没有运气！我认为这里还有其他的事情发生，因为即使增加样式来改变身体的背景颜色也是无所事事。这很古怪。 – snowBlind 2011-05-04 06:16:47

您是否在没有正确的DOCTYPE的情况下使用IE6？没有其他理由可以想到这是行不通的。你可以在http://jsfiddle.net上用CSS和HTML分享你的代码吗？哦，你有没有包括样式表？ – 2011-05-04 06:29:19

我正在使用FF4，Chrome11和IE9。另外，这些样式是嵌入式的，所以没有我忘记包含的外部样式。 http://jsfiddle.net/8cXqQ/我改变它包括一个宽度为人们在这里提到的，我删除了div，并将类添加到视频标签本身。 – snowBlind 2011-05-04 19:15:59

.center { width:500px; margin-right:auto; margin-left:auto; }

来源

2011-05-04 06:16:37 0xAli

@snowBlind在你给第一个例子，你的风格规则应该在一个<风格>标签，而不是一个<脚本>标签：

<style type="text/css"> 
    .center { 
    margin: 0 auto; 
    } 
</style>

而且，我想，是在this answer提到的（见http://jsfiddle.net/8cXqQ/7/结果）的变化，但他们仍然没有出现工作。

您可以用div围绕视频，并将div的宽度和自动边距应用于视频中心（同时指定视频的宽度属性，请参阅http://jsfiddle.net/8cXqQ/9/的结果）。

但是，这似乎并不是最简单的解决方案...我们不应该能够中心视频没有必须将其包装在一个容器div？

来源

2011-06-01 19:18:56

谢谢你用'style'和'script'指出我的错误。我知道CSS应该包装在一个样式标签中，但是在事故中必须只是键入脚本，并没有注意到它。 – snowBlind 2011-06-02 05:03:57

我遇到了同样的问题。这对我有效：

.center { 
    margin: 0 auto; 
    width: 400px; 
    **display:block** 
}

来源

2012-05-16 22:26:52 user1399749

非常感谢你，我遇到了同样的问题。由于某种原因，没有人指出。 – Abdel 2016-02-07 02:50:21

我有一个修复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>

来源

2012-12-02 14:03:12

我有同样的问题，直到我意识到<video>元件是内嵌元素，不会阻塞元件。您只需将容器元素设置为具有text-align: center;以便在页面上水平居中视频。

来源

2012-12-04 21:30:54 djpMusic

试试这个：

video { 
display:block; 
margin:0 auto; 
}

来源

2013-03-10 05:42:52 user1924493

HTML代码：

<div> 
<video class="center" src="vd/vd1.mp4" controls poster="dossierimage/imagex.jpg" width="600">⁪</video> 
</div>

CSS代码：

.center { 
    margin-left: auto; 
    margin-right: auto; 
    display: block 
}

来源

2013-03-29 03:45:55 badr

你能为此添加更多评论吗？ – 2013-03-29 04:04:01

虽然他没有评论它，但我可以尝试解释 - 这也是正确的答案，只有一个适合我。从@djpMusic，他说视频和音频元素实际上是内联元素而不是块，所以使用“display：block”你明确地说它是一个块元素，因此你可以应用margin-left：auto; margin-right：auto;使它们在容器内居中。 – AndrewB 2013-11-30 19:26:08

这样做：

<video style="display:block; margin: 0 auto;" controls>....</video>

完美的作品！：D

来源

2013-07-08 13:38:19 mehulmpt

感谢您的内联，当不使用CSS。 – 2015-04-20 13:40:37

您只需将视频标签设置为display:block;即可，FTW的默认值为inline-block FTL。

试试这个

.center { 
    margin: 0 auto; 
    width: (whatever you want); 
    display: block; 
}

来源

2014-08-26 19:16:44 user3529598

如果以百分比的宽度，你可以这样做：

video { 
 
    width: 50% !important; 
 
    height: auto !important; 
 
    margin: 0 auto; 
 
    display: block; 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<body> 
 

 
    <video controls> 
 
    <source src="http://www.nasa.gov/downloadable/videos/sciencecasts-_total_eclipse_of_the_moon.mp4" type="video/mp4"> 
 
     Your browser does not support HTML5 video. 
 
    </video> 
 

 
</body> 
 

 
</html>

来源

2016-06-20 14:14:23

我找到了这个网页，而试图居中对齐一对的视频。所以，如果我在一个中心div（我已经叫中央），保证金招作品附上两个视频，但宽度很重要（2个视频400 +填充等）

<div class=central> 
    <video id="vid1" width="400" controls> 
     <source src="Carnival01.mp4" type="video/mp4"> 
    </video> 

    <video id="vid2" width="400" controls> 
     <source src="Carnival02.mp4" type="video/mp4"> 
    </video> 
</div> 

<style> 
div.central { 
    margin: 0 auto; 
    width: 880px; <!--this value must be larger than both videos + padding etc--> 
} 
</style>

为我工作！

来源

2016-10-08 14:47:51 drmarkreuter

使用利润率<video>是一个内联元素，所以你必须添加display block;您CSS类。

您可以使用特定的，但我不会使用px值。使用％使其响应，如：

width: 50%;

这将使视频宽度的一半视口。

在这里看到了原始的文档Ø万维网联盟W3C

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>

看到代码准备这里更多的了解。

You can view the code online Fiddle

来源

2017-07-04 15:10:26

如何集中HTML5视频？

回答

相关问题