Wie kann ich mithilfe von CSS Text über einem Bild zentrieren?

Zentrieren von Text über einem Bild mit CSS

In diesem Artikel werden wir Techniken untersuchen, um Text mit CSS über einem Bild zu zentrieren.

Einfache Lösung

Um eine grundlegende Textzentrierung über einem Bild zu erreichen, gehen Sie wie folgt vor Schritte:

• Verwenden Sie position: absolute für das Textelement.
• Setzen Sie die Eigenschaft left auf 0 und die Eigenschaft width auf 100 %.
• Zentrieren Sie den Text horizontal mit Rand: 0 automatisch.

Beispiel:

<div class="image">
    <img src="sample.png"/>
    <div class="text">
       <h2>Some text</h2>
    </div>
</div>

.image {
   position: relative;
}

.text {
   position: absolute;
   left: 0;
   width: 100%;
   margin: 0 auto;
}

Verwendung von z-Index

Um sicherzustellen, dass Wenn Text über dem Bild erscheint, wenden Sie einen Z-Index mit einem höheren Wert als dem des Bildes auf das Textelement an Z-Index.

Beispiel:

<div>

#container {
    height: 400px;
    width: 400px;
    position: relative;
}

#image {
    position: absolute;
    left: 0;
    top: 0;
}

#text {
    z-index: 100;
    position: absolute;
    color: white;
    font-size: 24px;
    font-weight: bold;
    left: 150px;
    top: 350px;
}

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