HTML＆CSS-将图像轮播置于其容器的中心

Question

I've created a kind of image carousel effect but want to try figure out how to center it within it's container.

Not sure if this will be possible as the overflow is hidden but any suggestions or workarounds would be really appreciated.

 function slide(){ var first = $('.slider_img').first(); first.animate({opacity: '0', width: '0px'}, function() { first.appendTo('#slider').css({opacity: '1', width: 'auto'}); }); var slider_timeout = setTimeout(function(){slide()} , 3000); } slide(); 

 #slider_container{ position:relative; width:80%; height:50px; background-color:#fff; box-shadow:0px 0px 10px 0px rgba(0,0,0,0.5); overflow:hidden; } #slider{ /* center */ } #slider img{ display:inline-block; margin:0px 5px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <div id="slider_container"> <div id="slider"> <img class="slider_img" src="https://via.placeholder.com/100x50?text=1"> <img class="slider_img" src="https://via.placeholder.com/100x50?text=2"> <img class="slider_img" src="https://via.placeholder.com/100x50?text=3"> <img class="slider_img" src="https://via.placeholder.com/100x50?text=4"> <img class="slider_img" src="https://via.placeholder.com/100x50?text=5"> <img class="slider_img" src="https://via.placeholder.com/100x50?text=6"> <img class="slider_img" src="https://via.placeholder.com/100x50?text=7"> <img class="slider_img" src="https://via.placeholder.com/100x50?text=8"> <img class="slider_img" src="https://via.placeholder.com/100x50?text=9"> </div> </div> 

Answer 1

Like this? This version is using flexbox with justify-content: center;

 function slide(){ var first = $('.slider_img').first(); first.animate({opacity: '0', width: '0px'}, function() { first.appendTo('#slider').css({opacity: '1', width: 'auto'}); }); var slider_timeout = setTimeout(function(){slide()} , 3000); } slide(); 

 #slider_container { position: relative; width: 80%; height: 50px; background-color: #fff; box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5); overflow: hidden; } #slider { display: flex; justify-content: center; } #slider img { flex-shrink: 0; margin: 0px 5px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <div id="slider_container"> <div id="slider"> <img class="slider_img" src="https://via.placeholder.com/100x50?text=1"> <img class="slider_img" src="https://via.placeholder.com/100x50?text=2"> <img class="slider_img" src="https://via.placeholder.com/100x50?text=3"> <img class="slider_img" src="https://via.placeholder.com/100x50?text=4"> <img class="slider_img" src="https://via.placeholder.com/100x50?text=5"> <img class="slider_img" src="https://via.placeholder.com/100x50?text=6"> <img class="slider_img" src="https://via.placeholder.com/100x50?text=7"> <img class="slider_img" src="https://via.placeholder.com/100x50?text=8"> <img class="slider_img" src="https://via.placeholder.com/100x50?text=9"> </div> </div>