Bagaimana untuk Memusatkan SVG Dalam Bekas Div Menggunakan CSS?

Memusatkan SVG Dalam Bekas Div menggunakan CSS

Apabila cuba memusatkan SVG dalam div, anda mungkin menghadapi kesukaran jika div dan SVG mempunyai lebar yang berbeza-beza, walaupun menetapkan margin kepada "auto."

Memahami Isu:

SVG dipaparkan sebagai elemen sebaris secara lalai. Ini bermakna mereka berkelakuan seperti teks, jadi menetapkan "margin: auto" hanya mempengaruhi jidar kiri dan kanan. Dalam kes anda, jidar kiri lalai sifar kekal tidak terjejas, menyebabkan pengimbangan daripada tengah.

Penyelesaian:

1. Tetapkan Paparan: Sekat:

Tukar SVG kepada elemen blok dengan menambahkan "paparan: blok" ke CSSnya. Ini akan membenarkan "margin: auto" untuk memusatkan SVG secara mendatar dalam div.

Contoh:

svg {
  display: block;
  margin: auto;
}

2. Gunakan Text-Align: Center:

Kekalkan SVG sebagai elemen sebaris dan tetapkan "text-align: center" pada induk div. Ini akan menjajarkan semua elemen sebaris, termasuk SVG, ke tengah div.

Contoh:

div {
  text-align: center;
}

svg {
  margin: 0 auto;
}

3. Reka Letak Lentur atau Grid:

Sebagai alternatif, gunakan reka letak flex atau grid untuk memusatkan SVG dalam elemen induk:

Flexbox:

.container {
  display: flex;
  justify-content: center;
}

svg {
  margin: auto;
}

Grid:

.container {
  display: grid;
  justify-content: center;
}

svg {
  grid-column: 1;
}

Atas ialah kandungan terperinci Bagaimana untuk Memusatkan SVG Dalam Bekas Div Menggunakan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!