Jajar dan skalakan imej

Question

Saya memerlukan bantuan dengan kod ini di tapak web W3Schools saya, saya mahu menyimpan semua elemen di tengah halaman. Walau bagaimanapun, apabila saya tengah, kanta ciri menyasarkan kedudukan lama imej.

https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_image_zoom

Saya menukar kod, tetapi saya tidak dapat memahaminya

Apabila imej dipusatkan, kanta berada di luar imej. Macam ni post dia sebelum ni

Pusat imej, kedudukan lensa tidak betul

Selesai!!!

Untuk menyelesaikan situasi ini, buat div class="main" yang mengandungi semua elemen. Dalam kod CSS, kami menggunakan tetapan yang diberikan oleh rakan kami Samar. Terima kasih Samar.

Imej selesai!

Answer 1

Jadi, dari apa yang saya faham, anda mahu imej dan hasil zum kekal seperti sedia ada, tetapi berpusat pada halaman?

Jika ya, anda perlu menggunakan flexbox dalam css seperti ini:

.img-zoom-container {
  position: relative;
  flex-direction: column;
  display: flex;
  align-items: center;
}