Terdapat tiga cara utama untuk memusatkan imej dalam CSS: menggunakan paparan: blok dan margin: 0 auto;. Gunakan susun atur kotak flex atau susun atur grid dan tetapkan item jajar atau justify-kandungan ke tengah. Gunakan kedudukan mutlak, set atas dan kiri kepada 50%, dan gunakan transformasi: terjemah(-50%, -50%);.
Cara untuk memusatkan imej dalam CSS
Dalam CSS, gunakan gaya CSS berikut untuk memusatkan imej:
<code class="css">#image { display: block; margin: 0 auto; }</code>
Secara khusus, gaya CSS ini melakukan perkara berikut:
display: block;
)0
(margin: 0 auto;
),从而使其在父元素中居中其他方法
除了上述方法外,还有其他几种使图片居中的方法:
justify-content: center;
或 align-items: center;
属性可以使图片在父元素中水平或垂直居中。align-items: center;
或 justify-content: center;
属性可以使图片在父元素中居中。position: absolute;
属性并设置图片的 top
和 left
属性为 50%
,然后将 transform: translate(-50%, -50%);
应用于图片,使其从中心点偏移 -50%
Tetapkan jidar kiri dan kanan imej kepada Kaedah lain
Selain kaedah di atas, terdapat beberapa cara lain untuk memusatkan imej:
🎜🎜🎜Reka Letak Flexbox (Flexbox) 🎜: Gunakanalign-items: center;
atribut untuk memusatkan imej secara mendatar atau menegak dalam elemen induk. 🎜🎜🎜Grid🎜: Gunakan atribut align-items: center;
atau justify-content: center;
untuk memusatkan imej dalam elemen induk. 🎜🎜🎜Kedudukan mutlak🎜: Gunakan atribut position: absolute;
dan tetapkan atribut atas
dan kiri
imej kepada 50 %
code>, kemudian gunakan transform: translate(-50%, -50%);
to the image, offset it by -50%
from the center titik. 🎜🎜🎜🎜Pilih kaedah yang paling sesuai🎜🎜🎜Memilih kaedah yang paling sesuai bergantung pada keperluan khusus projek dan rangka kerja CSS yang digunakan. Untuk keperluan pemusatan yang mudah, anda boleh menggunakan kaedah pertama yang diperkenalkan di atas. Untuk susun atur yang lebih kompleks, susun atur kotak flex atau susun atur grid mungkin merupakan pilihan yang lebih baik. 🎜Atas ialah kandungan terperinci Bagaimana untuk meletakkan imej di tengah dengan css. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!