Bagaimana untuk menetapkan pemusatan mendatar img dalam css

Terdapat empat cara untuk menetapkan pemusatan mendatar elemen img melalui CSS: 1. Gunakan penjajaran teks untuk menetapkan elemen induk untuk dipusatkan 2. Gunakan margin: auto untuk memusatkan elemen berbanding dengan elemen induk; . Gunakan flexbox untuk menetapkan paparan elemen induk adalah flex dan justify-content is center 4. Menggunakan susun atur grid, buat grid dan letakkan elemen img dalam sel berpusat.

Tetapan untuk pemusatan mendatar img dalam CSS

Bagaimana untuk mendatar memusatkan elemen img?

Dalam CSS, terdapat beberapa cara untuk memusatkan elemen img secara mendatar:

1 text-align

Cara paling mudah ialah menggunakan atribut text-align untuk menetapkan induk. daripada elemen img Elemen ditetapkan ke tengah. text-align 属性将 img 元素的父元素设置为居中。

<code class="css">.parent-container {
  text-align: center;
}</code>

2. margin: auto

另一种方法是使用 margin: auto，这将使 img 元素相对于其父元素居中。

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

3. flexbox

使用 flexbox 布局，也可以通过设置父元素的 display: flex 和 justify-content: center 来水平居中 img 元素。

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

img {
  align-self: center;
}</code>

4. grid

使用网格布局，可以创建一个网格，然后将 img 元素放置在网格中的居中单元格中。

<code class="css">.parent-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
}

img {
  grid-column: 2;
}</code>

选择合适的方法

选择哪种方法取决于您项目的具体要求。对于大多数情况，使用 text-align 或 margin: autorrreee

🎜2: auto🎜🎜🎜Cara lain ialah menggunakan margin: auto, yang akan memusatkan elemen img berbanding elemen induknya. 🎜rrreee🎜🎜3. flexbox🎜🎜🎜Menggunakan reka letak flexbox, anda juga boleh mendatar memusatkan elemen img dengan menetapkan display: flex dan justify-content: center elemen induk . 🎜rrreee🎜🎜4. grid🎜🎜🎜Menggunakan reka letak grid, anda boleh mencipta grid dan kemudian meletakkan elemen img dalam sel berpusat dalam grid. 🎜rrreee🎜🎜Pilih kaedah yang betul🎜🎜🎜Kaedah yang anda pilih bergantung pada keperluan khusus projek anda. Untuk kebanyakan kes, menggunakan text-align atau margin: auto sudah memadai. Walau bagaimanapun, jika reka letak atau kawalan yang lebih maju diperlukan, flexbox atau susun atur grid mungkin merupakan pilihan yang lebih baik. 🎜

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