Bagaimana untuk membuat imej muncul di tengah atas dan bawah dalam css

Kaedah untuk menggunakan CSS untuk memusatkan imej ke atas dan ke bawah: gunakan flexbox, tetapkan arah flex bekas induk kepada lajur, justify-content dan align-item ke tengah. Gunakan kedudukan mutlak, tetapkan kedudukan imej kepada mutlak, atas dan kiri kepada 50%, dan gunakan atribut transformasi untuk mengimbangi. Untuk menggunakan reka letak grid, tetapkan paparan bekas induk kepada grid dan letakkan item ke tengah. Gunakan atribut muat objek untuk memusatkan imej

Cara menggunakan CSS untuk memusatkan imej ke atas dan ke bawah

Dalam CSS, anda boleh menggunakan kaedah berikut untuk memusatkan imej ke atas dan ke bawah:

Kaedah 1: Gunakan flexbox

<code class="css">.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

img {
  height: 100px;
}</code>

Kaedah kedua: Gunakan penentududukan mutlak

<code class="css">.container {
  position: relative;
}

img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}</code>

Kaedah ketiga: Gunakan susun atur grid

<code class="css">.container {
  display: grid;
  place-items: center;
}

img {
  height: 100px;
}</code>

kaedah keempat

method

: Gunakan atribut objekrr-fit lima: Gunakan padding

<code class="css">img {
  object-fit: contain;
}</code>

Cadangan untuk memilih kaedah:

• Jika anda memerlukan elemen lain di sekeliling imej, gunakan flexbox atau susun atur grid.
• Jika saiz imej ditetapkan, gunakan kedudukan mutlak atau atribut muat objek.
• Jika saiz imej tidak tetap, adalah disyorkan untuk menggunakan flexbox atau susun atur grid.

🎜

Atas ialah kandungan terperinci Bagaimana untuk membuat imej muncul di tengah atas dan bawah dalam css. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!