Cara Memusatkan SVG Dalam Div: Mengapa Margin: Auto Tidak Berfungsi dan Cara Membaikinya?

Cara Menjajarkan SVG dengan Sempurna dalam Div

Apabila menambahkan SVG (Grafik Vektor Boleh Skala) pada div, adalah penting untuk menjajarkan ia dengan tepat untuk mencapai susun atur yang dikehendaki. Berikut ialah soalan dan penyelesaian biasa mengenai topik ini:

Soalan:

Saya cuba memusatkan SVG dalam div, tetapi ia tidak berfungsi dengan betul. Div mempunyai lebar 900px dan SVG mempunyai lebar 400px. Saya telah menetapkan margin-kiri dan margin-kanan SVG kepada auto, tetapi ia bertindak seolah-olah margin kiri ialah 0. Apakah yang boleh menjadi isu?

Jawapan:

Dalam CSS, SVG ialah elemen sebaris secara lalai, bermakna ia berkelakuan seperti teks. Oleh itu, mereka tidak bertindak balas kepada tetapan margin seperti yang dilakukan oleh elemen blok. Untuk membetulkannya, anda perlu menambah paparan: blok pada SVG untuk menjadikannya elemen blok. Ini akan membolehkan margin: auto berfungsi seperti yang diharapkan, memusatkan SVG dalam div.

Sebagai alternatif, bergantung pada reka letak anda, anda boleh mengekalkan SVG dalam baris dan menetapkan penjajaran teks: tengah pada elemen induk. Ini akan menjajarkan semua elemen sebaris, termasuk SVG, ke tengah induk.

Pilihan lain ialah memanfaatkan reka letak kotak flex atau grid pada elemen induk dan menggunakan sifat pemusatan untuk menjajarkan SVG di dalamnya. Pendekatan ini memberikan lebih fleksibiliti dalam mengawal reka letak dan boleh berguna dalam pelbagai senario.

Atas ialah kandungan terperinci Cara Memusatkan SVG Dalam Div: Mengapa Margin: Auto Tidak Berfungsi dan Cara Membaikinya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!