Comment puis-je centrer du texte sur une image à l'aide de CSS ?

Centrage du texte sur une image avec CSS

Dans cet article, nous explorerons les techniques pour centrer le texte sur une image à l'aide de CSS.

Solution simple

Pour obtenir un centrage de base du texte sur une image, adoptez ce qui suit étapes :

• Utilisez la position : absolue pour l'élément de texte.
• Définissez la propriété left sur 0 et la propriété width sur 100 %.
• Centrez le texte horizontalement avec marge : 0 auto.

Exemple :

<div class="image">
    <img  src="/static/imghwm/default1.png" data-src="sample.png" class="lazy" alt="Comment puis-je centrer du texte sur une image à l'aide de CSS ?" >
    <div class="text">
       <h2 id="Some-text">Some text</h2>
    </div>
</div>

.image {
   position: relative;
}

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

Utilisation de z-Index

Pour assurer le le texte apparaît sur l'image, appliquez le z-index à l'élément de texte avec une valeur supérieure à celle de l'image z-index.

Exemple :

<div><pre class="brush:php;toolbar:false">#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;
}