ResponsiveSlides.js with Bootstrap 3

Question

I'm trying to center the ResponsiveSlides slider in a bootstrap column, but can't make it work. I have quite big images, so I resized them in the css to 80%. When it was 100% they fit the whole screen, but now they are aligned to the left. Could someone help, please? Thank you!

<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

I think that should be better to set the width of UL to 80% and the img to 100%

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

If you want to center IMG without changing the container, you have to remove the float: left; and the same margin: 0 auto;

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