Wie zentriere ich Text mithilfe von Flexbox oder CSS-Positionierung über einem Bild?

Mit Flexbox Text über einem Bild zentrieren

Frage: Wie können wir mit Flexbox Text über einem Bild zentrieren? ?

Alternative Lösung:

Obwohl die Verwendung von Flexbox eine Option ist, ist es nicht notwendig, den Text über einem Bild zu zentrieren. CSS-Positionseigenschaften bieten eine einfachere Lösung:

.height-100vh {
    height: 100vh;
    position: relative;
}

.text {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

1. Erstellen Sie einen CSS-Container: Für beide Methoden ist ein CSS-Container (Höhe-100vh) erforderlich, um den Inhalt zu positionieren.
2. Absolute Positionierung: Das Textelement wird absolut innerhalb des Containers positioniert.
3. Horizontale und vertikale Ausrichtung: links: 50 %; und oben: 50 %; Zentrieren Sie das Textelement horizontal und vertikal.
4. Präzise Zentrierung: Die Transformationseigenschaft optimiert die Positionierung, indem sie das Element in beiden Achsen um 50 % zurückversetzt.

Flexbox Lösung:

Wenn Flexbox bevorzugt wird, erfahren Sie hier, wie Sie Text über einem zentrieren Bild:

.height-100vh {
    height: 100vh;
    display: flex;
    flex-direction: column;
    position: relative;
}

.text {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

1. Flex-Container: Der Container (Höhe-100vh) ist als Flex-Container mit vertikaler Flex-Richtung eingerichtet.
2. Textpositionierung: Wie zuvor die Das Textelement ist absolut positioniert und zentriert mit links: 50 %, oben: 50 % und transform: translator(-50 %, -50 %).
3. Hauptachsenausrichtung: align-items: center; Zentriert den Inhalt vertikal im Flex-Container.

Während beide Methoden funktionieren, ist der CSS-Positionierungsansatz einfacher und vermeidet die Notwendigkeit von Flexbox beim Ausrichten von Text über einem Bild.

Das obige ist der detaillierte Inhalt vonWie zentriere ich Text mithilfe von Flexbox oder CSS-Positionierung über einem Bild?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!