Video mit CSS zentrieren

1. Verwenden Sie die CSS-Eigenschaften margin-left und transform, um das Videoelement zu zentrieren
2. Verwenden Sie die CSS-Eigenschaften display und margin, um das Videoelement zu zentrieren
3. Verwenden Sie die CSS-Eigenschaften width, justify-content und display, um das Videoelement zu zentrieren

In diesem Artikel wird der Benutzer lernen, das Element <video> nur mit CSS zu zentrieren. Wir haben die verschiedenen Methoden unten erklärt, um das Video mit CSS zu zentrieren.

Benutzer können jedoch das Element <video> in das Tag <center> einfügen und das Videoelement einfach zentrieren. Aber in unserem Fall werden wir das Tag <center> nicht verwenden, da wir nur CSS-Eigenschaften verwenden müssen.

Verwenden Sie die CSS-Eigenschaften margin-left und transform, um das Videoelement zu zentrieren

Wir können die CSS-Eigenschaften margin-left und transform verwenden, um das Videoelement zu zentrieren, ohne das HTML-Tag <center> zu verwenden.

Die Eigenschaft margin-left ermöglicht es uns, Platz auf der linken Seite des Elements zu lassen. Mit dem Wert 50vw der Eigenschaft margin-left bleibt die halbe Bildschirmbreite links vom Element.

Dabei steht vw im Wert für die Fenstergrösse des Bildschirms.

Die Eigenschaft transform wird verwendet, um die Position eines Elements mit CSS zu ändern. Wenn wir translate(-50%) als Wert der transform-Eigenschaft verwenden, wird das Video in die negative x-Richtung verschoben, was 50% der Videoelementbreite nach links bedeutet.

Beispielsweise haben wir darin die Tags <video> und <source> erstellt, um das Video in den HTML-Code einzubetten. Danach haben wir einige CSS-Eigenschaften auf das <video>-Tag angewendet.

Durch Anwenden der Eigenschaft transform: translate(-50%) stellen wir sicher, dass die Mittellinie des Videos die Mittellinie des Bildschirms überschreibt.

HTML Quelltext:

<video width="300" height="200" controls>
    <source
        src="https://www.youtube.com/watch?v=ZHumjSDbxUQ&ab_channel=DelftStack"
        type="video/mp4"
    />
</video>

CSS-Code:

video {
    margin-left: 50vw;
    transform: translate(-50%);
}

Verwenden Sie die CSS-Eigenschaften display und margin, um das Videoelement zu zentrieren

Wir werden die CSS-Eigenschaften display und margin verwenden, um die Videoelemente in diesem Teil zu zentrieren.

Benutzer können den Wert der Eigenschaft display festlegen, um das Element auf der Webseite gemäß ihren Anforderungen darzustellen. In unserem Fall setzen wir display: block, um Elemente im Block anzuzeigen.

Wie im obigen Beispiel besprochen, ermöglicht uns die Eigenschaft margin, den Abstand um die Elemente herum festzulegen. Wir werden den Wert margin: 0 auto auf die Eigenschaft margin setzen.

Hier steht 0 dafür, dass wir oben und unten im Element 0 Leerzeichen setzen müssen. Der Wert auto bedeutet, dass wir links und rechts vom Element gleiche Abstände einstellen müssen.

Auf diese Weise können wir das Video nur mit CSS zentrieren, indem wir links und rechts vom Element den gleichen Abstand festlegen.

Wir haben im folgenden Beispiel das HTML-Element <video> erstellt und die obigen CSS-Eigenschaften angewendet.

HTML Quelltext:

<video width="300" height="200" controls>
    <source
        src="https://www.youtube.com/watch?v=ZHumjSDbxUQ&ab_channel=DelftStack"
        type="video/mp4"
    />
</video>

CSS-Code:

video {
    display: block;
    margin: 0 auto;
}

Verwenden Sie die CSS-Eigenschaften width, justify-content und display, um das Videoelement zu zentrieren

In diesem Beispiel erstellen wir das HTML-Element <div> und weisen ihm den Klassennamen container zu. Wir werden zwei <video>-Elemente innerhalb des <div>-Elements hinzufügen.

Hier greifen wir mit seinem Klassennamen auf das Element <div> zu, um die CSS-Eigenschaften auf das gesamte Element <div> anzuwenden.

In CSS verwenden wir die Eigenschaft width:100%, die angibt, dass die Breite des <div>-Elements mit der container-Klasse dieselbe Breite wie die Bildschirmbreite haben soll. Danach verwenden wir die CSS-Eigenschaft justify-content: center, mit der wir den Inhalt des <div>-Elements zentrieren können.

Die Eigenschaften display: flex und flex-direction: Row zeigen beide <video>-Elemente in einer einzigen Zeile. Hier spielt die Eigenschaft justify-content die Hauptrolle, um die Elemente des <div> zu zentrieren.

Mit diesen drei Eigenschaften können wir den Inhalt des <div>-Elements zentrieren.

HTML Quelltext:

<div class="container">
    <video width="300" height="200" controls>
        <source
          src="https://www.youtube.com/watch?v=ZHumjSDbxUQ&ab_channel=DelftStack"
          type="video/mp4"
        />
    </video>
    <video width="320" height="240" controls>
        <source
          src="https://www.youtube.com/watch?v=ZHumjSDbxUQ&ab_channel=DelftStack"
          type="video/mp4"
        />
    </video>
</div>

CSS-Code:

.container {
    width: 100%;
    justify-content: center;
    display: flex;
    flex-direction: row;
}

Im obigen Ausgabebild können Benutzer sehen, dass sich beide Videos in einer einzelnen Reihe befinden und auf dem Bildschirm zentriert sind.

Dieser Artikel hat uns die drei Methoden zum Zentrieren des Elements <video> mit CSS beigebracht. Alle drei Methoden können mit anderen HTML-Elementen verwendet werden, um es zu zentrieren, da sie nicht elementspezifisch sind.