如何集中HTML5视频？

Question

如何集中HTML5视频？

我只是搞乱了一些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>

Run Code Online (Sandbox Code Playgroud)

我知道这一定是我在凌晨时分忽略的东西,但任何帮助都会受到赞赏.

谢谢

Answer 1

djp*_*sic 38

我遇到了同样的问题,直到我意识到<video>元素是内联元素,而不是块元素.您只需要设置容器元素text-align: center;,以便在页面上水平居中视频.

Answer 2

小智 33

中心类必须具有宽度才能使自动边距有效:

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

Run Code Online (Sandbox Code Playgroud)

然后我将中心类应用于视频本身,而不是容器:

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

Run Code Online (Sandbox Code Playgroud)

你缺少实际居中标签所需的`display:block;`样式 (17认同)
我增加了宽度。从 div 中删除了类，并将其添加到视频标签中。仍然没有运气！我认为这里发生了其他事情，因为即使添加样式来更改主体的背景颜色也无济于事。这很奇怪。 (2认同)

Answer 3

小智 33

HTML代码:

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

Run Code Online (Sandbox Code Playgroud)

CSS代码:

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

Run Code Online (Sandbox Code Playgroud)

你能为此添加更多评论吗？ (3认同)
虽然他没有评论,但我可以尝试解释 - 这也是正确的答案,只有一个对我有用.来自@djpMusic,他说视频和音频元素实际上是内联元素而不是块,所以使用"display:block;" 你明确地说它是一个块元素,因此你可以应用margin-left:auto; margin-right:auto; 使它们在容器中居中. (3认同)

Answer 4

meh*_*mpt 14

做这个:

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

Run Code Online (Sandbox Code Playgroud)

作品完美!:d

Answer 5

Jua*_*rgo 6

我不会像@user142019 所说的那样只使用视频标签来居中。我更喜欢这样做：

.videoDiv
{
    width: 70%; /*or whatever % you prefer*/
    margin: 0 auto;
    display: block;
}

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

这将使您的视频具有响应性，同时控件面板将具有与视频矩形相同的大小（我尝试了@user142019 所说的并且视频居中，但它在 Google Chrome 中看起来很丑陋）。

归档时间：	14 年，4 月前
查看次数：	182558 次
最近记录：	6 年，7 月前