I needed help with this code from the W3Schools website, I would like to leave all the elements centered on the page. however when I centralize, the lens of the function is for the old position of the image.
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_image_zoom
change the code, but I don’t understand
When the image is centered the lens is outside of it. Like it’s her old position
Image Center, len incorret position
Resolved !!!
To resolve the situation, a div class=”main” was created that encompasses all elements. In the css code, the settings that our friend Samar gave us were used. Thank you Samar.
Advertisement
Answer
So, from what I understand, you want both the image and the zoom result to stay as they are, but be centred in the page?
If so, you need to use flexbox in your css like this:
.img-zoom-container {
position: relative;
flex-direction: column;
display: flex;
align-items: center;
}For more about flexbox, check out this tutorial: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Hope this is helpful 🙂