ResponsiveSlides.js с Bootstrap 3

Question

Я пытаюсь центрировать слайдер ResponsiveSlides в столбце начальной загрузки, но не могу заставить его работать. У меня довольно большие изображения, поэтому я изменил их в css до 80%. Когда он был на 100%, они соответствовали всему экрану, но теперь они выровнены влево. Может кто-нибудь поможет, пожалуйста? Спасибо!

<div class="col-xs-12">  
<ul class="rslides"> 
<li><a href="#"><img src="..." alt=""></a></li> 
<li><a href="#"><img src="..." alt=""></a></li> 
</ul> 
</div> 

Css:

.rslides { 
    position: relative; 
    list-style: none; 
    overflow: hidden; 
    width: 100%; 
    padding: 0; 
    } 

.rslides li { 
    -webkit-backface-visibility: hidden; 
    position: absolute; 
    display: none; 
    width: 100%; 
    left: 0; 
    top: 0; 
    } 

.rslides li:first-child { 
    position: relative; 
    display: block; 
    float: left; 
    } 

.rslides img { 
    display: block; 
    height: auto; 
    float: left; 
    width: 80%; 
    border: 0; 
    } 

Answer 1

Я думаю, что должно быть лучше, чтобы установить ширину UL до 80%, а IMG до 100%

.rslides { 
    width: 80%; 
    margin: 0 auto; 
} 

Если вы хотите отцентрировать IMG без изменения контейнера, вы должны удалить float: left; и та же маржа: 0 auto;

.rslides img { 
    display: block; 
    height: auto; 
    float: left; <-- remove this 
    width: 80%; 
    border: 0; 
    margin: 0 auto; <-- add 
}