Wie kann ich Text mithilfe der CSS-Positionierung anstelle von Flexbox über einem Bild zentrieren?

Zentrieren von Text über einem Bild mithilfe von Flexbox

In diesem Leitfaden erkunden wir einen alternativen Ansatz zum Zentrieren von Text über einem Bild mithilfe reiner CSS-Positionierungseigenschaften anstelle von Flexbox.

Positionierungseigenschaften:

.height-100vh {
  position: relative;
}

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

1. Festlegen der Relativität Übergeordnetes Element: Wir legen position: relative für das Containerelement mit der Klasse height-100vh fest, um einen positionierten Vorfahren für die absolute Positionierung festzulegen.
2. Absolute Positionierung des Texts: Wir verwenden position: absolute auf der .text-Klasse, um es außerhalb des normalen Dokumentflusses zu positionieren.
3. Horizontal Ausrichtung:Bei der Einstellung links: 50 % zentrieren wir den Text horizontal, indem wir ihn vom linken Rand des Containers aus messen.
4. Vertikale Ausrichtung: Ebenso oben: 50 % vertikal Zentriert den Text, indem er vom oberen Rand des Behälters gemessen wird.
5. Präzise Zentrierung: Zu Um den Text genau zu zentrieren, wenden wir transform: Translate(-50%, -50%) an. Dadurch wird der Text um -50 % in beide Richtungen übersetzt und letztendlich in die Mitte verschoben.

Beispielverwendung:

<section class="height-100vh center-aligned">
  <img class="background-image" src="image.jpg" />
  <div class="text">SOME TEXT</div>
</section>

Durch die Implementierung dieser Positionierungseigenschaften können Sie ihn effektiv zentrieren Text über ein Bild schreiben, ohne auf Flexbox angewiesen zu sein. Dieser Ansatz bietet eine einfache und unkomplizierte Lösung für diese häufig auftretende Layoutaufgabe.

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