Bagaimana untuk meletakkan imej di tengah dengan css

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:

#image {
  display: block;
  margin: 0 auto;
}

Secara khusus, gaya CSS ini melakukan perkara berikut:

Tetapkan sekatan imej -elemen peringkat (paparan: blok;)
• display: block;）
• 将图片的左外边距和右外边距都设置为 0（margin: 0 auto;），从而使其在父元素中居中

其他方法

除了上述方法外，还有其他几种使图片居中的方法：

• 弹性盒子布局（Flexbox）：使用 justify-content: center; 或 align-items: center; 属性可以使图片在父元素中水平或垂直居中。
• 网格布局（Grid）：使用 align-items: center; 或 justify-content: center; 属性可以使图片在父元素中居中。
• 绝对定位：使用 position: absolute; 属性并设置图片的 top 和 left 属性为 50%，然后将 transform: translate(-50%, -50%); 应用于图片，使其从中心点偏移 -50%Tetapkan jidar kiri dan kanan imej kepada 0 (margin: 0 auto;) , dengan itu memusatkannya dalam elemen induk

Kaedah lain

Selain kaedah di atas, terdapat beberapa cara lain untuk memusatkan imej:

🎜🎜🎜Reka Letak Flexbox (Flexbox) 🎜: Gunakan atau align-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!