如何集中HTML5视频? [英] How to center HTML5 Videos?

查看:79
本文介绍了如何集中HTML5视频?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我只是搞砸了一些HTML5,我试图在视频中心的页面。由于某种原因,我不能得到它的中心。我试图添加一个类到视频标签本身,我已经将该视频包装在一个单独的 div 。但是,视频仍在左侧。

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.

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

感谢

推荐答案

中心类必须具有宽度以使汽车保证金工作:

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>

这篇关于如何集中HTML5视频?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆