How to center HTML5 Videos?
HTML CODE:
<div>
<video class="center" src="vd/vd1.mp4" controls poster="dossierimage/imagex.jpg" width="600"></video>
</div>
CSS CODE:
.center {
margin-left: auto;
margin-right: auto;
display: block
}
I was having the same problem, until I realized that <video>
elements are inline elements, not block elements. You need only set the container element to have text-align: center;
in order to center the video horizontally on the page.
The center class must have a width in order to make auto margin work:
.center { margin: 0 auto; width: 400px; }
Then I would apply the center class to the video itself, not a container:
<video class='center' …>…</video>