ResponsiveSlides.js mit Bootstrap 3

Question

Ich versuche, den ResponsiveSlides-Schieberegler in einer Bootstrap-Spalte zu zentrieren, aber es funktioniert nicht. Ich habe ziemlich große Bilder, also habe ich sie in der CSS auf 80% verkleinert. Bei 100% passen sie auf den ganzen Bildschirm, aber jetzt sind sie nach links ausgerichtet. Könnte jemand bitte helfen? Vielen Dank!

<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

denke ich, dass besser sein sollte, die Breite von UL zu 80% und das img zu 100%

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

einstellen Wenn Sie IMG zentrieren möchten ohne den Behälter zu wechseln, müssen Sie den Schwimmer entfernen: links; und der gleiche Rand: 0 auto;

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