在 HTML 中居中视频

Jinku Hu 2023年2月19日 2022年4月22日
  1. 在 HTML 中使用 marginwidthdisplay CSS 属性居中​​视频
  2. 在 HTML 中使用 center 标签居中​​视频
  3. 在 HTML 中使用 text-align CSS 属性居中​​视频
在 HTML 中居中视频

本教程将讨论一些在 HTML 中居中​​视频的方法。

在 HTML 中使用 marginwidthdisplay CSS 属性居中​​视频

我们可以使用 marginwidthdisplay CSS 属性的组合来使 HTML 中的视频居中。我们使用 margin 属性来设置元素在所有四个方向上的边距。

在此方法中,我们将使用该属性将边距应用于 video 标签。我们可以使用 width 属性来给元素一个特定的宽度。

我们可以设置各种单位的宽度,例如 pxem 甚至百分比。我们将在下面的示例中看到使用这些单位之间的区别。

display 属性对于设置所选元素的行为显示至关重要。它采用诸如 blockinline-blockinline 之类的值。

最后,我们使用 video 标签在 HTML 中插入视频。

例如,在 HTML 中编写一个带有 center 类的 video 标签。首先,在 src 属性中指定视频文件的正确 URL。

接下来,编写 controls 属性并关闭 video 标签。在 CSS 中选择 center 标签并应用 margin 属性。

将属性值设置为 0 auto 并指定视频宽度 300px。最后,将 display 属性设置为 block

现在,我们将描述我们在上述步骤中所做的事情。video 标签中的 controls 属性将显示暂停、播放、滑动、增大和减小音量以及切换全屏的控件。

如果我们从标签中删除 controls 属性,控制栏将在视频中消失。

CSS 的 margin 属性将顶部和底部边距设置为 0leftright 边距设置为 auto

这意味着视频将采用指定的宽度 300px,其余空间均分并设置为左右边距。

视频元素被设置为块级元素,这样视频将占据整个块的空间。它使前面的属性生效。

因此,我们可以使用诸如 marginwidthdisplay 属性之类的 CSS 属性在 HTML 中居中​​视频。

示例代码:

<video class="center" src="pointing_pink.mp4" controls></video>
.center{
 margin: 0 auto;
 width: 300px;
 display: block;
}

但是,这种方法有一个缺点。在上面的例子中,我们在 width 中使用了 px 单位。

当我们调整浏览器窗口大小或从移动视图浏览网站时,视频将无响应。

我们可以在 width 属性中使用 %vw 来解决这个问题。当我们使用这些单元时,视频元素是响应式的。

让我们看看下面的例子。

.center{
 margin: 0 auto;
 width: 40%;
 /* widht:40vw */
 display: block;
}

在 HTML 中使用 center 标签居中​​视频

我们还可以使用 center HTML 标签在 HTML 中将元素居中。

该标签一直使用到 HTML4。现代浏览器不支持该标签。

但是,一些较旧的浏览器仍然支持它。因此,建议不要使用 center 标签在 HTML 中使元素居中。

无论如何,我们将在本节中研究如何使用标签来使视频居中。

例如,创建一个 video 标签并插入一个视频。使用 width 属性为视频指定一定的宽度。

接下来,用 center 标签包裹 video 标签。因此,视频将居中。

<center>
 <video class="center" src="pointing_pink.mp4" controls width="300"> </video>
</center>

在 HTML 中使用 text-align CSS 属性居中​​视频

如前所述,不鼓励使用 center 标签。center 标签的替代方法是使用 text-align CSS 属性。

我们可以将 text-align 属性设置为 center 元素居中。我们可以实现这种技术来使视频居中。

然后,我们可以将视频包装在一个容器中并应用样式。

例如,使用类 center 创建一个 div。在 div 内,创建一个 video 标签来插入视频。

你可以在 HTML 中设置视频的宽度,也可以使用 CSS 的 width 属性。在 CSS 中,选择 center 类并将 text-align 属性设置为 center

因此,视频将居中。

示例代码:

 <div class="center">
 <video src="pointing_pink.mp4" controls width="400"></video>
 </div>
.center{
 text-align: center;
}

这篇文章教给我们三种不同的方法来使 HTML 中的视频居中。我们使用 margin 属性、center 标签和 text-align 属性来使 HTML 中的视频居中。

Author: Jinku Hu
Jinku Hu avatar Jinku Hu avatar

Founder of DelftStack.com. Jinku has worked in the robotics and automotive industries for over 8 years. He sharpened his coding skills when he needed to do the automatic testing, data collection from remote servers and report creation from the endurance test. He is from an electrical/electronics engineering background but has expanded his interest to embedded electronics, embedded programming and front-/back-end programming.

LinkedIn