Bagaimana untuk Memusatkan Teks Pada Imej Menggunakan CSS?

Letakkan Teks pada Imej dengan CSS

Artikel ini akan menunjukkan cara menjajarkan teks secara berpusat pada imej menggunakan CSS.

Senario Masalah

Anda mungkin menghadapi situasi berikut:

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

Dengan yang berikut CSS:

.image {
    position: relative;
}

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

Tetapi teks tetap tidak sejajar.

Penyelesaian

Menggunakan Penentududukan CSS

Untuk meletakkan teks di atas imej, gunakan CSS kedudukan:

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

Menggunakan z-index untuk Bertindih

Untuk memastikan teks menindan imej, gunakan z-index:

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

Kaedah Alternatif

Menggunakan HTML2PDF

Untuk mencipta PDF yang mengandungi imej dan teks berpusat, anda boleh menggunakan HTML2PDF. Mula-mula, tunjukkan kandungan HTML:

<div>

Seterusnya, gunakan HTML2PDF untuk menukar HTML kepada 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');

Perhatikan bahawa anda mungkin perlu melaraskan sedikit CSS dan HTML untuk memastikan pemaparan yang betul dalam persekitaran HTML2PDF.

Atas ialah kandungan terperinci Bagaimana untuk Memusatkan Teks Pada Imej Menggunakan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!