在 HTML 中居中視訊
-
在 HTML 中使用
margin
、width
和display
CSS 屬性居中視訊 -
在 HTML 中使用
center
標籤居中視訊 -
在 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 中的視訊居中。
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