Comment centrer les vidéos HTML5 ?

Question

Je m'amuse simplement avec du HTML5, et j'essayais de centrer une vidéo sur la page. Pour une raison quelconque, je n'arrive pas à la centrer. J'ai essayé d'ajouter une classe à la balise vidéo elle-même, et j'ai enveloppé la vidéo dans un div séparé. Cependant, la vidéo reste à gauche.

    Test

    .center {
      margin: 0 auto;
    }

        Votre navigateur ne supporte pas la balise vidéo.

Je sais que cela doit être quelque chose que je néglige dans les petites heures du matin, mais toute aide serait appréciée.

Merci

Answer 1

CODE HTML :

 

CODE CSS :

.center {
    margin-left: auto;
    margin-right: auto;
    display: block
}

Answer 2

La classe center doit avoir une largeur pour que la marge automatique fonctionne :

.center { margin: 0 auto; width: 400px; }

Ensuite, j'appliquerais la classe center directement à la vidéo elle-même, et non à un conteneur :

…

Answer 3

J'avais le même problème, jusqu'à ce que je réalise que les éléments sont des éléments en ligne, pas des éléments de bloc. Vous devez seulement définir l'élément conteneur pour avoir text-align: center; afin de centrer la vidéo horizontalement sur la page.

Answer 4

Faites ceci:

....

Fonctionne parfaitement! :D

Answer 5

Je ne préfère pas centrer juste en utilisant la balise vidéo comme le dit @user142019. Je préfère le faire de cette façon:

.videoDiv
{
    width: 70%; /*ou tout % que vous préférez*/
    margin: 0 auto;
    display: block;
}

  Votre navigateur ne supporte pas la balise vidéo.

Cela rendra votre vidéo responsive en même temps que le panneau de contrôle aura la même taille que le rectangle vidéo (j'ai essayé ce que dit @user142019 et la vidéo était centrée, mais elle était moche dans Google Chrome).