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;
}
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
}