對齊和縮放圖像

Question

我需要 W3Schools 網站上的此程式碼協助，我想將所有元素保留在頁面中央。然而，當我居中時，該功能的鏡頭針對影像的舊位置。

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

#改了程式碼，但看不懂

當影像居中時，鏡頭位於影像之外。就像這是她以前的職位一樣

影像中心，鏡頭位置不正確

已解決!!!

為了解決這種情況，建立了一個包含所有元素的 div class="main"。在CSS程式碼中，使用了我們的朋友Samar給我們的設定。謝謝薩馬爾。

映像已解決！

Answer 1

那麼，據我了解，您希望圖像和縮放結果保持原樣，但在頁面中居中？

如果是這樣，您需要在 css 中使用 flexbox，如下所示：

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