Bagaimanakah Saya Boleh Memusatkan Teks Pada Imej Tanpa Menggunakan Flexbox?

Memusatkan Teks Pada Imej dalam Flexbox

Flexbox, sistem susun atur serba boleh, digunakan secara meluas untuk menjajarkan kandungan. Walau bagaimanapun, untuk tugas khusus ini untuk memusatkan teks pada imej, sifat penentududukan CSS menyediakan penyelesaian yang lebih mudah dan berkesan.

Untuk mencapai pemusatan teks pada imej, kotak flex tidak diperlukan. Ikuti langkah berikut:

1. Tubuhkan Nenek Moyang Kedudukan Terdekat: Berikan kedudukan: harta relatif kepada bekas luar (.height-100vh dalam contoh ini) untuk mewujudkan nenek moyang kedudukan terdekat untuk kedudukan mutlak.
2. Gunakan Kedudukan Mutlak untuk Teks: Berikan bekas teks (div.text) kedudukan: sifat mutlak. Ini membolehkan anda meletakkan kedudukan teks dengan tepat berbanding dengan elemen induknya.
3. Jajarkan Secara Mendatar dan Menegak: Tetapkan ke kiri: 50% dan atas: 50% untuk menjajarkan teks secara mendatar dan menegak dalam bekas induk.
4. Tepat Tengah: Gunakan transformasi terjemahan (transform: translate(-50%, -50%);) untuk memperhalusi kedudukan, mengambil kira separuh lebar dan ketinggian elemen untuk pemusatan yang tepat.

Berikut ialah coretan CSS yang dikemas kini menggunakan ini konsep:

.height-100vh {
    height: 100vh;
    position: relative;
}

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

Kaedah ini berkesan memusatkan teks pada imej tanpa memerlukan kotak flex. Ia memastikan penjajaran yang tepat dan berfungsi merentas pelayar, menjadikannya penyelesaian yang boleh dipercayai untuk keperluan penjajaran anda.

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