[英]How to center image cards horizontally inside scrollable container with JS (or CSS)?
我有一個帶有圖像的水平滾動容器。 第三張圖片應該在容器的中心。 在平板電腦和手機上，容器內的圖像應該可以左右滾動。
這是演示：
目前在平板電腦和移動設備上，該塊從第一張圖像開始，但我需要第三張圖像始終位於中心（水平，而不是垂直），同時保持水平滾動圖像的能力。 請幫忙
問題僅在於屏幕寬度低於 1300PX。 1300px+ 的行為是正確的
我想問題出在 Javascript 上。 我試過Element.scrollIntoView()但它會自動滾動到這個塊（這個元素在一個更大的網站中間使用），所以我不能使用它
我用來嘗試居中圖像的 JS 代碼：
const centeredImage = document.getElementById("center-image");
const scrollableContainer = document.querySelector(".section-more-clients-images-card");
centeredImage.parentNode.scrollLeft = centeredImage.clientWidth / 130;
.section-more-flats-images-card { display: grid; grid-gap: 7px; grid-template-columns: repeat(5, 27%); grid-template-rows: minmax(190px, auto); overflow-x: auto; margin-bottom: 34px; }.image-card { position: relative; max-height: 500px; max-width: 275px; background-color: red; }.image-card img { width: 100%; height: auto; }.image-card:nth-child(3) { margin-top: 31.9%; background-color: green; }.image-card:nth-child(2), .image-card:nth-child(5) { margin-top: 14.41%; }::-webkit-scrollbar { display: none; } @media screen and (min-width: 1019px) {.section-more-flats-images-card { grid-template-columns: repeat(5, 275px); } } @media screen and (min-width: 1300px) {.section-more-flats-images-card { justify-content: flex-start; margin-left: 4.4444%; gap: 20px; } }
<,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width. initial-scale=1,0. maximum-scale=1.0"> <title>INGRAD</title> <link href="./resetNew.css" rel="stylesheet" /> <link href="./styleNewMain.css" rel="stylesheet" /> </head> <body> <main class="main"> <.-------------- DIV MORE FLATS IMAGES --------------> <div class="section-more-flats-images-card"> <div class="image-card"> </div> <div class="image-card"> </div> <div class="image-card" id="center-image"> </div> <div class="image-card"> </div> <div class="image-card"> </div> </div> <script src="./script.js" type="text/javascript"></script> </body> </html>
請注意，您必須在加載時運行 function，但在 window 上調整中心 position 可能會丟失。 原因是如果畫廊寬度發生變化，第三張圖片將不再居中。
Also keep in mind that running the below function on window resize might cause the user to lose their scrolled position , but since they might lose it even without the function, I would run it anyways.
最后但同樣重要的是，直接在 window 調整大小事件中運行此 function 可能會導致性能問題，因為它會根據用戶調整大小的程度運行數十次。 因此，您可能希望實現等到調整大小的功能，但這不在此問題的 scope 范圍內:)
function centerThirdImageOfHorizontalGallery() {
const horizontalGallery= document.querySelector('.section-more-flats-images-card');
const imageToCenter= document.querySelector('#center-image');
// Centers the image by setting its parent element's scrollLeft
horizontalGallery.scrollLeft = imageToCenter.offsetLeft - (horizontalGallery.offsetWidth / 2) + (imageToCenter.offsetWidth / 2);
}
要在文檔加載時調用上述 function，請將此腳本粘貼到 html 中，或將其放入單獨的.js 文件中並將其鏈接到 html。
<script>
function centerThirdImageOfHorizontalGallery() {
const horizontalGallery= document.querySelector('.section-more-flats-images-card');
const imageToCenter= document.querySelector('#center-image');
// Centers the image by setting its parent element's scrollLeft
horizontalGallery.scrollLeft = imageToCenter.offsetLeft - (horizontalGallery.offsetWidth / 2) + (imageToCenter.offsetWidth / 2);
}
window.addEventListener('load', () => {
centerThirdImageOfHorizontalGallery();
});
</script>
function centerThirdImageOfHorizontalGallery() { const horizontalGallery= document.querySelector('.section-more-flats-images-card'); const imageToCenter= document.querySelector('#center-image'); horizontalGallery.scrollLeft = imageToCenter.offsetLeft - (horizontalGallery.clientWidth / 2) + (imageToCenter.clientWidth / 2); }
.section-more-flats-images-card { display: grid; grid-gap: 7px; grid-template-columns: repeat(5, 27%); grid-template-rows: minmax(190px, auto); overflow-x: auto; margin-bottom: 34px; }.image-card { position: relative; max-height: 500px; max-width: 275px; background-color: red; }.image-card img { width: 100%; height: auto; }.image-card:nth-child(3) { margin-top: 31.9%; background-color: green; }.image-card:nth-child(2), .image-card:nth-child(5) { margin-top: 14.41%; }::-webkit-scrollbar { display: none; } @media screen and (min-width: 1019px) {.section-more-flats-images-card { grid-template-columns: repeat(5, 275px); } } @media screen and (min-width: 1300px) {.section-more-flats-images-card { justify-content: flex-start; margin-left: 4.4444%; gap: 20px; } }
<,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width. initial-scale=1,0. maximum-scale=1.0"> <title>INGRAD</title> <link href="./resetNew.css" rel="stylesheet" /> <link href="./styleNewMain.css" rel="stylesheet" /> </head> <body> <main class="main"> <!-------------- DIV MORE FLATS IMAGES --------------> <div class="section-more-flats-images-card"> <div class="image-card"> </div> <div class="image-card"> </div> <div class="image-card" id="center-image"> </div> <div class="image-card"> </div> <div class="image-card"> </div> </div> </body> </html>
@YasinKuralay 正如您在上面的代碼片段中所見，JS 代碼沒有將圖像居中。
如何將我的卡片可滾動容器居中放置在所有設備的中間？
[英]How to center my cards scrollable container in the middle in all my devices?
如何在較小的 div 內制作圖像中心（垂直和水平）
[英]How to make an image center (vertically & horizontally) inside a smaller div
如何將div放在容器高度增長的容器可滾動容器div中
[英]How to center a div inside a container scrollable container div whose height grows
圖像（絕對位置）在相對位置的容器中水平居中
[英]Image(Absolute Positioned) Horizontally center in a Relative Positioned container
如何設置一個可水平滾動但垂直固定在另一個Div內的Div
[英]How to set a Div scrollable horizontally but vertically fixed inside another Div
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.