我目前正在从事一个元素,该元素是一个移动优先的电子商务响应网站。我正在尝试创建一个滑动的产品 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>
结果的图像也显示在下面
最佳答案
试试吧,用你的代码替换这两个类并检查:
.topseller-sliding-divs {
width: 13.3%;
text-align: center;
}
.topseller-sliding-divs img {
margin: 0 auto;
max-width: 100%;
}
关于html - 创建 slider 但无法将图像置于绝对 div 的中心,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50740019/