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="sample.png"/>
    <div class="text">
       <h2>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="sample.png"/>
    <div class="text-container">
       <h2>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>

Ensuite, utilisez HTML2PDF pour convertir le HTML en PDF :

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.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!