【问题标题】:Move Gallery to center of page in Wordpress在 Wordpress 中将图库移动到页面中心
【发布时间】:2018-09-25 04:00:21
【问题描述】:

最近我发布了关于如何将我的画廊定位到中心的问题,并从许多会员那里得到了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> 

【问题讨论】:

    标签: css wordpress


    【解决方案1】:

    您之前的问题中的幻灯片容器应用了内联样式,它使整个滑块向左浮动。因此,您需要确保滑块的宽度为 100%,否则text-align:center; 将不起作用。尝试将width:100%!important; 也添加到.flex-active-slide

    【讨论】:

    • 刚刚将width:100%; 添加到.flex-active-slide,但在重新加载图库页面时看不到更改。
    • 请提供重新创建问题所需的代码
    • 看来这就是我的想法。每个li 都获得width:555px; 的内联样式,尝试使用width:100%!important 覆盖该样式。
    • !important 添加到宽度,但页面看起来很奇怪。请重新加载页面查看效果。
    • 问题似乎源于您的滑块位于col-lg-6 内,这是一个 50% 宽度的列。您使用col-lg-6 而不是col-lg-12 有什么原因吗?如果您想继续使用col-lg-6,您还必须覆盖max-width:50%flex:0 0 50%; 属性。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2021-08-06
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2023-03-24
    • 1970-01-01
    相关资源
    最近更新 更多