Bagaimanakah Saya Boleh Memusatkan Imej Secara Menegak Dalam Bekas Menggunakan CSS?

Memusatkan Imej Menegak Dalam Bekas

Cabaran biasa dalam pembangunan bahagian hadapan ialah memusatkan imej secara menegak dalam bekas yang lebih besar. Apabila menggunakan penjajaran teks: tengah, pemusatan mendatar dicapai dengan mudah, tetapi penjajaran menegak kekal sukar difahami.

Penyelesaian Menggunakan Kedudukan Mutlak

Penyelesaian yang boleh dipercayai melibatkan memanfaatkan kedudukan mutlak bersempena dengan margin automatik. Kedudukan mutlak membolehkan kami mengawal kedudukan imej secara halus berdasarkan elemen induknya. Menetapkan jidar automatik (menggunakan jidar: auto) dengan berkesan memusatkan imej secara mendatar dan menegak.

Contoh Kod

Kod CSS berikut menunjukkan pendekatan ini:

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

Akibatnya, imej akan diletakkan di tengah tepat bekas induknya, tanpa mengira ketinggian atau ketinggian bekas itu. lebar. Penyelesaian ini serasi dengan penyemak imbas lama (IE >= 8) dan menangani isu penjajaran menegak dengan berkesan.

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