Bagaimanakah Saya Boleh Memusatkan Teks Pada Imej Menggunakan CSS?

Memusatkan Teks Pada Imej dengan CSS

Dalam artikel ini, kita akan meneroka teknik untuk memusatkan teks pada imej menggunakan CSS.

Penyelesaian Mudah

Untuk mencapai pemusatan teks asas pada imej, pakai langkah berikut:

• Gunakan kedudukan: mutlak untuk elemen teks.
• Tetapkan sifat kiri kepada 0 dan sifat lebar kepada 100%.
• Pusat secara mendatar teks dengan margin: 0 auto.

Contoh:

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

.image {
   position: relative;
}

.text {
   position: absolute;
   left: 0;
   width: 100%;
   margin: 0 auto;
}

Menggunakan z-Index

Untuk memastikan teks muncul di atas imej, gunakan indeks-z pada elemen teks dengan nilai yang lebih tinggi daripada imej z-index.

Contoh:

<div>

#container {
    height: 400px;
    width: 400px;
    position: relative;
}

#image {
    position: absolute;
    left: 0;
    top: 0;
}

#text {
    z-index: 100;
    position: absolute;
    color: white;
    font-size: 24px;
    font-weight: bold;
    left: 150px;
    top: 350px;
}

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