迹忆客 专注技术分享

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

在 HTML 中使用 margin、width 和 display CSS 属性居中​​视频

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

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

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

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

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

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

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

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

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

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

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

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

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

因此，我们可以使用诸如 margin、width 和 display 属性之类的 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 中的视频居中。