在 HTML 中居中視訊

1. 在 HTML 中使用 margin、width 和 display CSS 屬性居中​​視訊
2. 在 HTML 中使用 center 標籤居中​​視訊
3. 在 HTML 中使用 text-align CSS 屬性居中​​視訊

本教程將討論一些在 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 中的視訊居中。