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

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 08:24:53  来源:igfitidea点击:

How to center HTML5 Videos?

csshtmlvideo

提问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.

请参阅此处准备好的代码以获取更多理解。

You can view the code online Fiddle

可以在线查看代码Fiddle

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