Question

最近，我发布了一个关于如何将画廊定位在中心位置的问题，并从很多成员那里得到了answer。今天复制了该站点，并开始在another fork site上进行工作，与上一个站点类似，主题相同。我使用了相同的CSS，就像上一个线程一样：

.flex-active-slide {
 text-align: center;
}

但是似乎没有做任何改变。我从第一个站点和第二个站点检查了CSS类，它有点不同，所以我应用了这个CSS：

.col-lg-6 {width:100%;}
.flex-active-slide {
 text-align: center;
}

但是看不到任何变化。有帮助吗？

编辑：这是该元素的整个CSS类：

    <div class="col-lg-6">
                                <div class="gallery-single-post clearfix">
                                    <div class="clearfix" id="slider">

                                            <div class="flex-viewport" style="overflow: hidden; position: relative;"><ul class="slides" style="width: 1200%; transition-duration: 0s; transform: translate3d(0px, 0px, 0px);">
            <li class="flex-active-slide" style="width: 555px; float: left; display: block;"><a href="http://spas-hammam.com/wp/wp-content/uploads/2014/05/gallery-31.jpg" title=""><img src="http://spas-hammam.com/wp/wp-content/uploads/2014/05/gallery-31-670x500.jpg" alt="gallery-3" draggable="false"></a></li><li style="width: 555px; float: left; display: block;"><a href="http://spas-hammam.com/wp/wp-content/uploads/2014/05/gallery-11.jpg" title=""><img src="http://spas-hammam.com/wp/wp-content/uploads/2014/05/gallery-11-670x500.jpg" alt="gallery-1" draggable="false"></a></li><li style="width: 555px; float: left; display: block;"><a href="http://spas-hammam.com/wp/wp-content/uploads/2014/05/gallery-41.jpg" title=""><img src="http://spas-hammam.com/wp/wp-content/uploads/2014/05/gallery-41-670x500.jpg" alt="gallery-4" draggable="false"></a></li><li style="width: 555px; float: left; display: block;"><a href="http://spas-hammam.com/wp/wp-content/uploads/2014/05/gallery-5.jpg" title=""><img src="http://spas-hammam.com/wp/wp-content/uploads/2014/05/gallery-5-670x500.jpg" alt="gallery-5" draggable="false"></a></li><li style="width: 555px; float: left; display: block;"><a href="http://spas-hammam.com/wp/wp-content/uploads/2014/05/gallery-6.jpg" title=""><img src="http://spas-hammam.com/wp/wp-content/uploads/2014/05/gallery-6-670x500.jpg" alt="gallery-6" draggable="false"></a></li><li style="width: 555px; float: left; display: block;"><a href="http://spas-hammam.com/wp/wp-content/uploads/2014/05/gallery-7.jpg" title=""><img src="http://spas-hammam.com/wp/wp-content/uploads/2014/05/gallery-7-670x500.jpg" alt="gallery-7" draggable="false"></a></li>        </ul></div><ul class="flex-direction-nav"><li><a class="flex-prev flex-disabled" href="#" tabindex="-1">Previous</a></li><li><a class="flex-next" href="#">Next</a></li></ul></div>
                                                                            <div id="carousel" class="flexslider">

                                        <div class="flex-viewport" style="overflow: hidden; position: relative;"><ul class="slides" style="width: 1200%; transition-duration: 0s; transform: translate3d(0px, 0px, 0px);">
                                                <li style="width: 89px; float: left; display: block;" class="flex-active-slide"><img src="http://spas-hammam.com/wp/wp-content/uploads/2014/05/gallery-31-111x69.jpg" alt="gallery-3" draggable="false"></li><li style="width: 89px; float: left; display: block;"><img src="http://spas-hammam.com/wp/wp-content/uploads/2014/05/gallery-11-111x69.jpg" alt="gallery-1" draggable="false"></li><li style="width: 89px; float: left; display: block;"><img src="http://spas-hammam.com/wp/wp-content/uploads/2014/05/gallery-41-111x69.jpg" alt="gallery-4" draggable="false"></li><li style="width: 89px; float: left; display: block;"><img src="http://spas-hammam.com/wp/wp-content/uploads/2014/05/gallery-5-111x69.jpg" alt="gallery-5" draggable="false"></li><li style="width: 89px; float: left; display: block;"><img src="http://spas-hammam.com/wp/wp-content/uploads/2014/05/gallery-6-111x69.jpg" alt="gallery-6" draggable="false"></li><li style="width: 89px; float: left; display: block;"><img src="http://spas-hammam.com/wp/wp-content/uploads/2014/05/gallery-7-111x69.jpg" alt="gallery-7" draggable="false"></li>                                            </ul></div><ul class="flex-direction-nav"><li><a class="flex-prev flex-disabled" href="#" tabindex="-1">Previous</a></li><li><a class="flex-next" href="#">Next</a></li></ul></div>
                                                                        </div>
                            </div>

Answer 1

上一个问题已将线性样式应用于幻灯片容器，该样式使整个滑块向左浮动。因此，您需要确保滑块的宽度为100％，否则text-align:center;无效。也尝试将width:100%!important;添加到.flex-active-slide。

将库移至Wordpress中页面的中心

1 个答案: