Bagaimanakah Saya Boleh Memusatkan Teks Pada Imej Menggunakan Kedudukan CSS Daripada Flexbox?

Memusatkan Teks Pada Imej Menggunakan Flexbox

Dalam panduan ini, kami akan meneroka pendekatan alternatif untuk memusatkan teks pada imej menggunakan sifat penentududukan CSS tulen dan bukannya Flexbox.

Kedudukan Sifat:

.height-100vh {
  position: relative;
}

.text {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

1. Menubuhkan Induk Relatif: Kami menetapkan kedudukan: relatif pada elemen kontena dengan kelas ketinggian-100vh untuk menubuhkan nenek moyang yang diposisikan untuk kedudukan mutlak.
2. Meletakkan Teks dengan Benar: Kami menggunakan kedudukan: mutlak pada kelas .text untuk meletakkannya di luar aliran dokumen biasa.
3. Penjajaran Mendatar: Dengan menetapkan ke kiri: 50%, kami memusatkan teks secara mendatar dengan mengukurnya dari tepi kiri bekas.
4. Penjajaran Menegak: Begitu juga, atas: 50% menegak di tengah teks dengan mengukurnya dari tepi atas bekas.
5. Pemusatan Tepat: Untuk memusatkan teks dengan tepat, kami menggunakan transformasi: terjemah(-50%, -50%). Ini menterjemah teks sebanyak -50% dalam kedua-dua arah, akhirnya mengalihkannya ke tengah.

Contoh Penggunaan:

<section class="height-100vh center-aligned">
  <img class="background-image" src="image.jpg" />
  <div class="text">SOME TEXT</div>
</section>

Dengan melaksanakan sifat penentududukan ini, anda boleh memusatkan dengan berkesan teks pada imej tanpa bergantung pada Flexbox. Pendekatan ini menawarkan penyelesaian yang mudah dan mudah untuk tugas reka letak biasa ini.

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