创建一个滑块，但在绝对div的中心无法拟合图像

Question

我目前正在开展一个项目，这是一个移动优先的电子商务响应网站。我正在尝试创建一个详细说明最畅销产品的滑动产品。

这个想法是允许用户点击向左或向右滑动箭头，产品范围将相应地滑动 - 这个功能我确定你在大多数电子商务网站上看到了probalby。

现在我正处于创建此部分的设计方面，但出于某种原因，我无法将显示在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%;
}

Answer 2

当您使用display: flex;然后将其内容与中心对齐时，您必须使用justify-content:center;而不是text-align: center;  试试这个。

 .special-offers h1{
   text-align: center;
 }
 .mobile-topselling-slideshow {
    	display: flex;
    	justify-content: 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%;
     text-align:center;
}
.topseller-sliding-divs img {
    margin: 0 auto;
    max-width: 100%;
}

<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>