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

Positionnement du texte sur une image avec CSS

Cet article montrera comment aligner le texte de manière centrale sur une image à l'aide de CSS.

Scénario de problème

Vous pouvez rencontrer la situation suivante :

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

Avec ce qui suit CSS :

.image {
    position: relative;
}

h2 {
    position: absolute;
    top: 200px;
    left: 0;
    width: 100%;
    margin: 0 auto;
    width: 300px;
    height: 50px;
}

Mais le texte reste mal aligné.

Solution

Utiliser le positionnement CSS

Pour positionner le texte par-dessus l'image, utilisez CSS positionnement :

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

.image-container {
    position: relative;
}

.text-container {
    position: absolute;
    top: 50%;  /* Position the text vertically */
    left: 50%;  /* Position the text horizontally */
    transform: translate(-50%, -50%);  /* Center the text */
    color: white;
    font-size: 24px;
    text-align: center;
}

Utilisation de z-index pour le chevauchement

Pour vous assurer que le texte recouvre l'image, utilisez z-index :

.text-container {
    z-index: 1;
}

Méthode alternative

Utilisation HTML2PDF

Pour créer un PDF contenant l'image et le texte centré, vous pouvez utiliser HTML2PDF. Tout d'abord, restituez le contenu HTML :

<div>
<p>Ensuite, utilisez HTML2PDF pour convertir le HTML en PDF :</p>
<pre class="brush:php;toolbar:false">require_once('html2pdf/html2pdf.class.php');
$html2pdf = new HTML2PDF('L', 'A4', 'en');
$html2pdf->writeHTML(file_get_contents('image-container.html'));
$html2pdf->Output('random.pdf');

Notez que vous devrez peut-être ajuster légèrement le CSS et le HTML pour garantir rendu correct dans l'environnement HTML2PDF.