Flex 滑块图像未居中

Question

I'm having some problems with flexlider. The images of the slider on my website are not centered

http://reart.armah.net/

I see that my slider is not responsive too.

 <div class="flexslider"> <ul class="slides"> <li style="background-image:url({{media url="wysiwyg/slider-1/img1palceholder.jpg"}});"><a href="#">&nbsp;</a></li> <li style="background-image:url({{media url="wysiwyg/slider-1/img2palceholder.jpg"}});"><a href="#">&nbsp;</a></li> </ul> </div>

 .flexslider .slides > li {display: none; -webkit-backface-visibility: hidden; list-style:none !important;} /* Hide the slides before the JS is loaded. Avoids image jumping */ .flexslider .slides img {width: 100%; display: block;}

Answer 1

Are you using Bootstrap? If so, you can put it inside a container like this:

<div class="flexslider">
    <div class="container">
        <ul class="slides">
            <li style="background-image:url({{media url="wysiwyg/slider-1/img1palceholder.jpg"}});"><a href="#">&nbsp;</a></li>
            <li style="background-image:url({{media url="wysiwyg/slider-1/img2palceholder.jpg"}});"><a href="#">&nbsp;</a></li>
        </ul>
    </div>
</div>

If you're not using bootstrap, did you try giving the images max-width:100%; ?