Center big image in smaller div
- by larin555
I'm trying to align images in the center of a slider div.
I'm adjusting FlexSlider css by the way. Here's my CSS code :
.flexslider {margin: 0; padding: 0; width: 600px; height:480px; overflow:hidden;margin-left:auto;margin-right:auto;}
.flexslider .slides > li {display: none; -webkit-backface-visibility: hidden;} /* Hide the slides before the JS is loaded. Avoids image jumping */
.flexslider .slides img {width:auto;height:100%; display: inline-block; text-align:center;}
Everything is working like I want, except that I want wider image to be centered in the div. Right now it is left-aligned. I cannot use background-image by the way. Any ideas?
I also tried applying to the .flexslider .slides img :
margin-left:-50%...not working
margin-left:auto and margin-right:auto...not working
left:50% and right:50%...not working either
