在 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