html - 创建 slider 但无法将图像置于绝对 div 的中心

Question

我目前正在从事一个元素，该元素是一个移动优先的电子商务响应网站。我正在尝试创建一个滑动的产品 div，详细说明最畅销的产品范围。

这个想法是让用户点击左侧或右侧的滑动箭头，产品范围将相应地滑动 - 我相信您可能在大多数电子商务网站上看到过这个功能。

现在我正在创建此部分的设计方面，但出于某种原因我无法将出现在 div 中的图像居中。我是否正确分配了百分比？我计划在移动版本中显示一张产品图片，但在桌面版本中显示 3 张。

我的代码如下所示。

HTML:

/* TOP SELLING RANGE SECTION */

    .mobile-topselling-slideshow {
    	display: flex;
    	align-items: center;
    }
    
    .top-selling-arrows {
    	width: 10%;
    	text-align: center;
    	color: green;
    	font-size: 2em;
    }
    
    #top-selling-slider {
    	position: relative;
    	width: 80%;
    	overflow: hidden;
    }
    
    #top-selling-productdetails {
    	z-index: 60000;
    	display: flex;
    	width: 600%;
    }
    
    .topseller-sliding-divs {
    	width: 13.3%
    }
    
    
    .topseller-sliding-divs img {
    	width: 100%;
    	display: inline-block;
    	margin: auto;
    }

    <div class="content-container">
    
    <section class="special-offers">
    
    <h1>THIS WEEK'S TOP SELLERS</h1>
    
    <div class="mobile-topselling-slideshow">
    
    <div id="left-scroll-topselling" class="top-selling-arrows">
    
    <i class="fas fa-caret-left"></i>
    
    </div>
    
    <div class="topselling-products">
    
    <div id="top-selling-slider">
    
    <div id="top-selling-productdetails">
    
    <div id="item1topseller" class="topseller-sliding-divs">
    <img src="images/sports/5.png" />
    </div>
    
    <div id="item2topseller" class="topseller-sliding-divs">
    <img src="images/sports/1.jpg" />
    </div>
    
    <div id="item3topseller" class="topseller-sliding-divs">
    <img src="images/sports/5.png" />
    </div>
    
    <div id="item4topseller" class="topseller-sliding-divs">
    <img src="images/sports/5.png" />
    </div>
    
    <div id="item5topseller" class="topseller-sliding-divs">
    <img src="images/sports/5.png" />
    </div>
    
    <div id="item6topseller" class="topseller-sliding-divs">
    <img src="images/sports/5.png" />
    </div>
    
    </div>
    
    </div>
    
    </div>
    
    <div id="right-scroll-topselling" class="top-selling-arrows">
    
    <i class="fas fa-caret-right"></i>
    
    </div>
    
    </div>
    
    </section>
    
    </div>

结果的图像也显示在下面

Answer 1

试试吧，用你的代码替换这两个类并检查:

.topseller-sliding-divs {
    width: 13.3%;
    text-align: center;
}
.topseller-sliding-divs img {
    margin: 0 auto;
    max-width: 100%;
}