I've been struggling to center the ResponsiveSlides slider within a bootstrap column. Despite resizing my large images to 80% in the CSS, they still refuse to align properly since they're no longer fitting the entire screen at 100%. Can someone lend a hand? Appreciate it!
<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;
}