Wie zentriere ich Text mithilfe von CSS über einem Bild?

Text über einem Bild mit CSS positionieren

In diesem Artikel wird gezeigt, wie man Text mit CSS zentral über einem Bild ausrichtet.

Problemszenario

Die folgende Situation kann auftreten:

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

Mit Folgendem CSS:

.image {
    position: relative;
}

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

Aber der Text bleibt falsch ausgerichtet.

Lösung

CSS-Positionierung verwenden

Um den Text darüber zu positionieren Verwenden Sie für das Bild die CSS-Positionierung:

<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;
}

Verwenden Z-Index für Überlappung

Um sicherzustellen, dass der Text das Bild überlagert, verwenden Sie Z-Index:

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

Alternative Methode

Verwendung von HTML2PDF

Um ein PDF mit dem Bild und zentriertem Text zu erstellen, können Sie HTML2PDF verwenden. Rendern Sie zunächst den HTML-Inhalt:

<div>

Als nächstes verwenden Sie HTML2PDF, um den HTML-Inhalt in PDF zu konvertieren:

require_once('html2pdf/html2pdf.class.php');
$html2pdf = new HTML2PDF('L', 'A4', 'en');
$html2pdf->writeHTML(file_get_contents('image-container.html'));
$html2pdf->Output('random.pdf');

Beachten Sie, dass Sie CSS und HTML möglicherweise leicht anpassen müssen, um dies sicherzustellen ordnungsgemäße Darstellung innerhalb der HTML2PDF-Umgebung.

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