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="/static/imghwm/default1.png" data-src="sample.png" class="lazy" alt="Bagaimanakah Saya Boleh Memusatkan Teks Pada Imej Menggunakan CSS?" >
    <div class="text">
       <h2 id="Some-text">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><pre class="brush:php;toolbar:false">#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;
}