Создание слайдера, но возникают проблемы с размещением изображения в центре абсолютного деления

Question

В настоящее время я работаю над проектом, который является мобильным веб-сайтом, ориентированным на электронную коммерцию.Я пытаюсь создать скользящий раздел продуктов, детализирующий самый продаваемый ассортимент.

Идея состоит в том, чтобы позволить пользователю нажимать стрелки влево или вправо, и ассортимент продуктов будет соответственно скользить - особенностьЯ уверен, что вы, вероятно, видели на большинстве веб-сайтов электронной коммерции.

В данный момент я занимаюсь дизайном создания этого раздела, но по какой-то причине я не могу центрировать изображения, которые появляются в 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

Когда вы используете 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>

Answer 2

Просто попробуйте заменить эти два класса вашим кодом и проверьте:

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