Heim > Web-Frontend > CSS-Tutorial > Wie zentriere ich Text mithilfe von CSS über einem Bild?

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

Linda Hamilton
Freigeben: 2024-12-19 22:58:11
Original
153 Leute haben es durchsucht

How to Center Text Over an Image Using CSS?

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>
Nach dem Login kopieren

Mit Folgendem CSS:

.image {
    position: relative;
}

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

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>
Nach dem Login kopieren
.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;
}
Nach dem Login kopieren

Verwenden Z-Index für Überlappung

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

.text-container {
    z-index: 1;
}
Nach dem Login kopieren

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>
Nach dem Login kopieren

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');
Nach dem Login kopieren

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!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage