11

我正在尝试在我的网站中将视频居中，但我不想在 HTML 中使用中心标签，因为它有点过时了。我如何用 CSS 做到这一点？如果有帮助，这是我的 HTML 代码。

<center>
  <video width="320" height="240" controls>
    <source src="video.mp4" type="video/mp4">
    <source src="video.ogg" type="video/ogg">
    <source src="video.webm" type="video/webm">
    Your browser does not support the video tag.
  </video>
</center>
4

5 回答 5

22

这是一个例子：http: //jsfiddle.net/Cn7SU/

只需将这些 CSS 规则添加到元素video：

display: block;
margin: 0 auto;

添加display: block属性很重要。否则你不能居中元素。

于 2013-07-07T02:33:34.900 回答
12

以下是使视频居中的 3 种方法：

1.使用保证金

video {
  display: block;
  margin: auto;
}

2.使用变换

video {
  margin-left: 50vw;
  transform: translate(-50%);
}

3. 使用容器和弹性盒子

.container video {
  display: flex;
  justify-content: center;
}
于 2019-06-18T15:52:29.580 回答
6

要水平居中视频添加：

display: block;
margin: 0 auto;
于 2015-08-07T14:45:53.930 回答
4

我知道这个话题很长，但你去吧：

这是页面的中心

video {
  transform: translate(-50%, -50%);
  position: absolute;
  top: 50%;
  left: 50%;
}

这是在生产线的中间

video {
  display: block;
  margin: auto;
}

只为寻找这个的人

于 2020-09-01T09:29:13.390 回答
1

试试这个，在你的视频标签周围有一个包装器 div。html5 视频和图像在样式设置时被视为文本。所以 text-align:center 会起作用。你可以检查下面的小提琴。

<div class="video">  
  <video width="320" height="240" controls>
    <source src="video.mp4" type="video/mp4">
    <source src="video.ogg" type="video/ogg">
    <source src="video.webm" type="video/webm">
    Your browser does not support the video tag.
  </video>
</div>
于 2013-07-07T02:34:43.717 回答