Bagaimana untuk menetapkan pusat img dalam css

Dalam CSS, anda boleh memusatkan imej dengan: Menggunakan sifat penjajaran teks: Tetapkan imej sebagai elemen blok dan tetapkan jidar kiri dan kanan automatik. Gunakan susun atur flexbox: letakkan imej ke dalam bekas flexbox dan tetapkan sifat pemusatan mendatar dan menegak. Gunakan reka letak grid: Letakkan imej ke dalam bekas grid dan tetapkan kedua-dua sifat tengah mendatar dan menegak. Gunakan kedudukan mutlak: Alih keluar imej daripada aliran biasa, pusatkan secara mendatar dan pusatkan secara menegak dengan perubahan.

Cara untuk memusatkan imej dalam CSS

Dalam CSS, terdapat banyak cara untuk memusatkan imej:

Gunakan atribut penjajaran teks

Jadikan imej sebagai elemen blok.

• margin: 0 auto Secara automatik menetapkan jidar kiri dan kanan imej supaya ia berpusat secara mendatar dalam elemen induk. display: block 使图像成为一个块元素。
• margin: 0 auto 自动设置图像的左右外边距，使其在父元素中水平居中。

使用 flexbox 布局

<code class="css">img {
  display: block;
  margin: 0 auto;
}</code>

• 创建一个 flexbox 容器（.container）。
• justify-content: center 将子元素（图像）在水平方向上居中。
• align-items: center 将子元素在垂直方向上居中。

使用网格布局

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

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

• 创建一个网格容器（.container）。
• place-items: center 将子元素（图像）同时在水平和垂直方向上居中。

使用绝对定位

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

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

• 使用绝对定位将图像从其正常流中移除。
• left: 50% 将图像水平居中，但它将相对于其父元素的左边界居中。
• transform: translate(-50%, -50%)

🎜Buat bekas flexbox (.bekas) menggunakan susun atur flexbox🎜🎜

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

🎜🎜. 🎜🎜justify-content: center Memusatkan elemen anak (imej) secara mendatar. 🎜🎜align-item: center Memusatkan elemen kanak-kanak secara menegak. 🎜🎜🎜🎜Buat bekas grid (.bekas) menggunakan reka letak grid🎜🎜rrreee🎜🎜. 🎜🎜item tempat: tengah Memusatkan elemen kanak-kanak (imej) secara mendatar dan menegak. 🎜🎜🎜🎜Gunakan kedudukan mutlak🎜🎜rrreee🎜🎜Gunakan kedudukan mutlak untuk mengalih keluar imej daripada aliran biasa. 🎜🎜kiri: 50% Memusatkan imej secara mendatar, tetapi ia akan dipusatkan berbanding dengan sempadan kiri elemen induknya. 🎜🎜transformasi: terjemah(-50%, -50%) Mengalihkan imej ke kiri dan ke atas sebanyak 50% daripada lebar dan ketinggiannya sendiri, memusatkannya dalam elemen induk. 🎜🎜

Atas ialah kandungan terperinci Bagaimana untuk menetapkan pusat img dalam css. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!