Bagaimana untuk Memusatkan Imej Bersaiz Besar Dalam Div Menggunakan CSS?

Memusatkan Imej Bersaiz Besar dalam Div dengan CSS

Apabila berurusan dengan susun atur bendalir di mana lebar bekas imej berbeza-beza, memusatkan imej bersaiz besar dalam div menjadi satu cabaran. Kaedah CSS tradisional, seperti menetapkan margin-kiri dan margin-kanan kepada auto, hanya berfungsi untuk imej yang lebih kecil daripada div sekelilingnya.

Untuk menangani isu ini, pertimbangkan penyelesaian CSS berikut:

.parent {
    position: relative;
    overflow: hidden;
    // Optional height and width settings based on the desired design
}

.child {
    position: absolute;
    top: -9999px;
    bottom: -9999px;
    left: -9999px;
    right: -9999px;
    margin: auto;
}

Pendekatan ini memastikan bahawa mana-mana imej, tanpa mengira saiz, akan dipusatkan secara mendatar dan menegak dalam div induknya. Nilai atas, bawah, kiri dan kanan negatif pada asasnya memaksa imej untuk mengisi keseluruhan ruang dalam induk dan jidar: peraturan auto memusatkannya dalam ruang itu.

Dengan menyembunyikan sebarang unsur yang melimpah di luar div induk menggunakan limpahan: tersembunyi, imej bersaiz besar akan dipotong sama rata pada kedua-dua tepi, mewujudkan kesan pemusatan yang diingini.

Atas ialah kandungan terperinci Bagaimana untuk Memusatkan Imej Bersaiz Besar Dalam Div Menggunakan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!