Bagaimana untuk Memusatkan Teks Pada Imej Menggunakan Flexbox atau Kedudukan CSS?

Memusatkan Teks pada Imej menggunakan Flexbox

Soalan: Bagaimanakah kita boleh menjajarkan teks ke atas imej menggunakan Flexbox ?

Alternatif Penyelesaian:

Semasa menggunakan Flexbox adalah pilihan, anda tidak perlu mencapai pemusatan teks pada imej. Sifat kedudukan CSS menyediakan penyelesaian yang lebih mudah:

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

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

1. Tubuhkan Bekas CSS: Untuk kedua-dua kaedah, bekas CSS (ketinggian-100vh) diperlukan untuk meletakkan kandungan.
2. Kedudukan Mutlak: Elemen teks diletakkan secara mutlak dalam bekas.
3. Mendatar dan Menegak Penjajaran: kiri: 50%; dan atas: 50%; pusatkan elemen teks secara mendatar dan menegak.
4. Pemusatan Tepat: Sifat transformasi memperhalusi kedudukan dengan menterjemahkan elemen kembali sebanyak 50% dalam kedua-dua paksi.

Flexbox Penyelesaian:

Jika Flexbox diutamakan, berikut ialah cara untuk memusatkan teks pada imej:

.height-100vh {
    height: 100vh;
    display: flex;
    flex-direction: column;
    position: relative;
}

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

1. Bekas Lentur: Bekas (ketinggian-100vh) disediakan sebagai bekas lentur dengan arah lentur menegak.
2. Kedudukan Teks: Seperti sebelum ini, elemen teks benar-benar diposisikan dan berpusat dengan kiri: 50%, atas: 50%, dan ubah: terjemah(-50%, -50%).
3. Penjajaran Paksi Utama: align-item: tengah; menegakkan kandungan dalam bekas fleksibel.

Sementara kedua-dua kaedah berfungsi, pendekatan penentududukan CSS adalah lebih mudah dan mengelakkan keperluan untuk Flexbox apabila menjajarkan teks pada imej.

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