html - 创建滑块但在绝对 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>

结果的图像也如下所示

标签： htmlcssalignment

Answer 1

试一试，用您的代码替换这两个类并检查：

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