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 berbeza-beza, pusatkan imej bersaiz besar dalam div boleh mencabar menggunakan CSS sahaja. Tingkah laku lalai untuk imej yang lebih lebar daripada bekasnya ialah menjajarkan ke kiri, meninggalkannya diimbangi ke kanan.

Untuk menangani isu ini, penyelesaian yang bergantung sepenuhnya pada CSS boleh dilaksanakan. Begini caranya:

Tetapkan div ibu bapa sifat CSS:

<code class="css">position: relative;
overflow: hidden;</code>

Ini menetapkan div sebagai bekas untuk meletakkan kedudukan dan mengekang sebarang kandungan yang melimpah.

Untuk imej bersaiz besar (dirujuk sebagai "kanak-kanak"), gunakan CSS berikut:

<code class="css">position: absolute;
top: -9999px;
bottom: -9999px;
left: -9999px;
right: -9999px;
margin: auto;</code>

• Kedudukan: Mutlak: Mengeluarkan imej daripada aliran dokumen biasa.
• Koordinat Negatif: Memanjangkan imej melepasi sempadan div dalam semua arah. Ini penting untuk peletakan.
• Auto Margin: Memusatkan imej dalam div induk.

Dengan menggunakan sifat CSS ini, imej bersaiz besar akan diletakkan di tengah div induknya, tanpa mengira saiz atau lebar induknya. Koordinat negatif memastikan limpahan terputus sama rata pada kedua-dua tepi, memberikan hasil yang menarik secara visual.

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!