Bagaimana untuk Memusatkan Imej dengan Sempurna dalam Div?

Mencapai Pemusatan Imej Sempurna dalam Div Bekas

Satu cabaran biasa dalam reka bentuk web ialah memusatkan imej dalam div bekas yang lebih besar. Mari kita atasi pertanyaan ini dengan penyelesaian penjajaran menegak dan mendatar yang tepat.

Soalannya:

Bagaimanakah kita boleh memusatkan imej 50 x 50 px dalam div 200 x 200 px , memastikan penjajaran mendatar dan menegak?

The Jawapan:

Untuk mencapai penjajaran ini, kami menggunakan teknik berikut:

Pemusatan Menegak dan Mendatar menggunakan Kedudukan Mutlak

Kedudukan mutlak dalam gabungan dengan jidar automatik membolehkan kami memusatkan elemen secara mendatar dan menegak. Dengan mengasaskan kedudukan elemen pada kedudukan relatif unsur induk, kami memastikan penjajaran yang tepat.

Kod CSS:

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

Kod ini memastikan imej berada di tengah dalam div kontena, tanpa mengira saiz atau keserasian penyemak imbasnya.

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