Bagaimana untuk Memusatkan SVG dalam Div Apabila Lebar Berbeza?

Menjajarkan SVG Dalam Div

Memusatkan SVG dalam div boleh menimbulkan cabaran, terutamanya apabila div dan SVG mempunyai lebar yang berbeza. Mari kita siasat isu yang dikemukakan dalam soalan dan terokai penyelesaian yang berpotensi.

Pernyataan Masalah

Pengguna cuba memusatkan SVG dalam div menggunakan margin-left: auto dan margin-right: auto. Walau bagaimanapun, SVG kekal dijajar ke kiri seolah-olah margin-kiri ditetapkan kepada 0.

Penyelesaian

Isu ini timbul kerana, secara lalai, SVG ialah kandungan sebaris. Untuk menjadikannya tahap blok, anda perlu menyatakan secara eksplisit paparan: blok. Sebaik sahaja anda melakukan ini, margin: auto akan berfungsi seperti yang dimaksudkan dan memusatkan SVG dalam div.

<code class="CSS">svg {
  display: block;
  margin: auto;
}</code>

Pendekatan Alternatif

1. Penjajaran teks: Daripada mengubah suai paparan SVG, anda boleh menyelaraskannya dalam elemen induk menggunakan text-align: center. Pendekatan ini mengekalkan SVG sebaris tetapi memusatkannya dalam induk.
2. Reka Letak Flex/Grid: Reka letak fleksibel atau grid menyediakan alternatif lain. Dengan menetapkan elemen induk sebagai bekas flex atau grid, anda boleh menggunakan sifat align-item atau justify-item untuk memusatkan SVG.

Untuk meringkaskan, memastikan SVG dipaparkan sebagai blok- elemen tahap (paparan: blok) membolehkan anda menggunakan margin: auto untuk pemusatan. Sebagai alternatif, susun atur penjajaran teks: tengah atau flex/grid juga boleh menjajarkan SVG dengan berkesan dalam elemen induknya.

Atas ialah kandungan terperinci Bagaimana untuk Memusatkan SVG dalam Div Apabila Lebar Berbeza?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!