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

Text über einem Bild in Flexbox und CSS-Positionierung zentrieren

Das Zentrieren von Text über einem Bild ist eine häufige Layoutanforderung. Während Flexbox leistungsstarke Ausrichtungsoptionen bietet, können Sie diesen Effekt auch mit CSS-Positionierungseigenschaften erzielen.

Absolute Positionierung verwenden

So zentrieren Sie Text über einem Bild mithilfe absoluter Positionierung:

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

• Legen Sie einen statischen Positionswert für den Körper fest, um einen absolut positionierten Vorfahren festzulegen Positionierung.
• Das Textelement absolut positionieren.
• Horizontal den Text mit links zentrieren: 50 %; und zentrieren Sie es vertikal mit oben: 50 %;.
• Verwenden Sie eine Transformation, um die Zentrierung zu optimieren, indem Sie sie auf die Hälfte ihrer Breite und Höhe verschieben.

Mit Flexbox

Alternativ kann Flexbox sowohl für Bild als auch für Text verwendet werden Positionierung:

body {
  margin: 0px;
}
...
.height-100vh {
  height: 100vh;
  display: flex;
  flex-direction: column;
  position: relative;
}
...
.text {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-weight: bold;
}
.center-aligned {
  display: flex;
  align-items: center;
  justify-content: center;
}

• Umschließen Sie sowohl die Bild- als auch die Textelemente in einem Flexbox-Container mit einer Höheneigenschaft.
• Set align-items: center; und justify-content: center; um Elemente innerhalb des Containers vertikal und horizontal auszurichten.
• Positionieren Sie das Textelement unbedingt im Container und formatieren Sie es wie gewünscht.

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