Bagaimana untuk menyelaraskan tiga fail SVG ke tengah pada halaman?-Soal Jawab Rangkaian PHP Cina

Saya mempunyai tiga fail SVG berasingan yang apabila berlapis di atas satu sama lain, mencipta satu grafik. Fail SVG pertama ialah segi tiga merah, yang kedua ialah bulatan biru di dalam segi tiga, dan yang ketiga ialah segi empat tepat ungu di pangkal segi tiga (dengan sedikit ruang antara segi tiga dan segi empat tepat). Matlamat saya adalah untuk mempunyai ketiga-tiga fail SVG di atas satu sama lain di tengah halaman. Di bawah ialah kod HTML dan CSS saya.

*{ margin: 0; padding: 0; box-sizing: border-box; } .graphic{ height: 100vh; width: 100vw; background-color: palegreen; display: grid; place-items: center; position: relative; } .triangle{ position: absolute; } .circle{ position: absolute; top:0; } .rectangle{ position:relative; }

      Graphic-center

Seperti yang anda lihat dalam CSS saya, saya cuba menggunakan —position:absolute; dan position:relative - tetapi saya masih tidak dapat membuat mereka bertindih dengan betul di tengah halaman. Perlu diingat bahawa saya akan menggunakan @keyframes untuk menganimasikan fail SVG setelah ia dipusatkan dengan betul, dan saya perlu menghidupkannya secara individu (melainkan ada cara lain), jadi kedudukan setiap fail SVG tidak boleh dibetulkan pada halaman (iaitu saya perlu dapat menggerakkannya). Ada sesiapa boleh tolong? Terima kasih terlebih dahulu.

* { margin: 0; padding: 0; box-sizing: border-box; } html, body { height: 100%; } .graphic { display: flex; justify-content: center; align-items: center; height: 100%; width: 100%; background-color: palegreen; position: relative; } .triangle, .circle, .rectangle { position: absolute; } .circle { top: 0; left: 0; right: 0; bottom: 0; margin: auto; } .rectangle { bottom: 20px; /* Adjust this value to add space between the triangle and rectangle */ }

* { margin: 0; padding: 0; box-sizing: border-box; } .graphic { background-color: palegreen; display: grid; place-items: center; grid-template-columns: 100vw; grid-template-rows: 100vh; } .triangle { z-index: 2; } .circle, .rectangle, .triangle { display: block; grid-column: 1; grid-row: 1; }

membalas semua (2)

P粉8608979432023-09-08 11:24:17 Tingkat 2

Untuk menjajarkan tengah dan menutup tiga fail SVG, anda boleh menggunakan Flexbox dan kedudukan mutlak. Berikut ialah versi terkini kod HTML dan CSS:

Div luar dengan kelas "grafik" menjajarkan fail SVG secara mendatar dan menegak menggunakan Flexbox. Ini memastikan ia diletakkan di tengah-tengah halaman.

Kedudukan setiap fail SVG ditetapkan kepada kedudukan mutlak untuk membolehkannya bertindih antara satu sama lain.

Fail SVG bulat dipusatkan dalam div induknya, menggunakan margin: auto dan menetapkan semua sisi (atas, kanan, bawah, kiri) kepada 0. Ini memusatkan bulatan secara mendatar dan menegak dalam segi tiga.

Gunakan sifat Bawah untuk meletakkan fail SVG segi empat tepat di bahagian bawah. Anda boleh melaraskan nilai "bawah" untuk menambah atau mengurangkan ruang antara segi tiga dan segi empat tepat.