在 Wordpress 中将图库移动到页面中心

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。