Question

我在使用flexlider时遇到了一些问题。我网站上滑块的图像不居中

http://reart.armah.net/

您好我尝试过在其他主题上找到的css问题，但没有人帮助我。我看到我的滑块也没响应。

<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

您使用的是Bootstrap吗？如果是这样，你可以将它放在这样的容器中：

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

如果您没有使用bootstrap，您是否尝试过提供图像max-width:100%;？

Flex滑块图像不居中

1 个答案: