Bagaimana untuk Memusatkan Imej Secara Menegak dan Mendatar dalam Div?

Memusatkan Imej dalam Div yang Lebih Besar (Menegak dan Mendatar)

Keperluan biasa dalam reka bentuk web ialah memusatkan imej dalam yang lebih besar div. Walaupun pemusatan mendatar boleh dicapai menggunakan penjajaran teks, penjajaran menegak boleh menjadi lebih mencabar, terutamanya dalam keserasian merentas penyemak imbas.

Penyelesaian:

Untuk memusatkan imej secara mendatar dan secara menegak dalam div yang lebih besar, gabungan kedudukan mutlak dan margin automatik boleh digunakan. Kedudukan mutlak membolehkan imej diposisikan secara relatif kepada elemen induknya, manakala jidar automatik memastikan elemen dipusatkan secara mendatar dan menegak.

Berikut ialah kod CSS untuk melaksanakan penyelesaian ini:

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

Kod ini meletakkan imej sepenuhnya dalam div yang lebih besar, dengan jidar atas, bawah, kiri dan kanannya ditetapkan kepada auto. Ini memastikan bahawa imej dipusatkan secara menegak dan mendatar dalam div.

Nota:

Penyelesaian ini berfungsi dalam penyemak imbas moden (IE >= 8) yang menyokong automatik margin. Untuk pelayar lama, penyelesaian alternatif seperti flexbox atau grid CSS mungkin diperlukan untuk mencapai kesan yang diingini.

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