Bagaimanakah Saya Boleh Memusatkan Imej Secara Menegak dan Mendatar Dalam Div?

Memusatkan Imej Secara Menegak dan Mendatar Dalam Div Bekas

Apabila ingin meletakkan imej dengan tepat dalam div yang lebih besar, mencapai kedua-dua menegak dan penjajaran mendatar boleh memberikan cabaran. Begini cara untuk melakukannya:

Penjajaran Mendatar:

Untuk memusatkan imej secara mendatar dalam div, gunakan ciri penjajaran teks: tengah CSS yang digunakan pada div induk. Ini memusatkan semua kandungan dalam div, termasuk imej.

Penjajaran Menegak:

Mencapai penjajaran menegak memerlukan pendekatan yang berbeza. Satu teknik yang berkesan melibatkan penggunaan penentududukan mutlak:

• Tetapkan kedudukan imej kepada mutlak, menunjukkan bahawa ia diposisikan secara mutlak berbanding nenek moyang kedudukannya yang paling hampir (div induk dalam kes ini).
• Guna margin: auto; untuk mendayakan jidar automatik, yang akan memusatkan imej dalam ruang yang tersedia.
• Menetapkan atas, kiri, kanan dan bawah kepada 0 memastikan imej meliputi keseluruhan ketinggian dan lebar div induk.

Contoh CSS:

img {
    position: absolute;
    margin: auto;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

Dengan menggabungkan penjajaran mendatar melalui penjajaran teks: penjajaran tengah dan menegak menggunakan kedudukan mutlak dengan jidar, anda boleh memusatkan imej dengan berkesan dalam div sempadan yang lebih besar.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Memusatkan Imej Secara Menegak dan Mendatar Dalam Div?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!