How to use the style Attribute In HTML
In this approach, the style attribute is used to center both the heading and the video within their respective <div> elements by setting the text-align property to center.
Syntax:
<div style="text-align: center;">
Example: The below example uses the style Attribute to Center a Video in HTML.
<!DOCTYPE html>
<html>
<head>
<title>style Attribute</title>
</head>
<body>
<div style="text-align: center;">
<h1 style="color: green;">
w3wiki
</h1>
<p>Using the style Attribute</p>
</div>
<div style="text-align: center;">
<video controls style="width:100%;
max-width: 400px;">
<source type="video/mp4" src=
"https://media.w3wiki.org/wp-content/uploads/20240311160922/Demo.mp4" >
Your browser does not support the video tag.
</video>
</div>
</body>
</html>
Output:
How to Center a Video in HTML ?
Centering a video in HTML enhances the user interface, offering a cleaner and more organized appearance. We can achieve this effect with two different methods, by using the Flexbox and the “style” attribute.
Below are the approaches to Center a Video in HTML:
Table of Content
- Using the Flexbox
- Using the style Attribute