在Wordpress中心NextGen Gallery

问题描述：

我在我的Wordpress网站上使用了NextGen Gallery，但图库框不尊重页面其余部分的左边距（也就是说，所有其他图像，文本等都有一些一些缩进或填充，但NextGen画廊一直漂浮到左侧）。我想阻止它覆盖这个填充，或者至少浮到中心位置。我试过在几处编辑CSS，但我可能会编辑错误的类或其他东西。画廊的一个例子是在http://www.montereyhighdrama.com/multimedia/the-marriage-of-figaro-2010/页面的底部附近谢谢。在Wordpress中心NextGen Gallery

答

简单的方法是使用：

<center>[nggallery id=1]</center>或<div align="center";>[nggallery id=1]</div>

第一种方法使用'

'这是一个不推荐的标签。 – cfx 2013-08-01 17:18:24

无论如何都不起作用，因为它被应用于已居中且宽度为100％的包含元素。所有你需要的是.ngg-gallery-thumbnail-box {float}：none！important; display：inline-block; } – matt 2014-03-09 02:43:51

答

我有同样的问题，而是需要对于动态所有NextGen的画廊合作的解决方案，所以我用媒体查询。顺便说一句，我找不到任何其他解决方案，不知道如何使用上述代码。

我使用催化剂/动力学主题，所以我可以设置一个确切的页面宽度和＃容器包装初始填充，但没有做任何事情来缩放缩略图或改善移动设备的外观。

这些是我的媒体查询，你将不得不调整你的缩略图大小，我用了220px宽。

最终结果：http://site01.profoliolive.com/fixed-grid/在iPad，iPhone和Android手机上进行测试。

@media (max-width: 1209px) { 
    .ngg-galleryoverview { padding-left: 115px; } 
} 

@media (max-width: 1170px) { 
    .ngg-galleryoverview { padding-left: 90px; } 
} 

@media (max-width: 1140px) { 
    .ngg-galleryoverview { padding-left: 80px; } 
} 

@media (max-width: 1120px) { 
    .ngg-galleryoverview { padding-left: 70px; } 
} 

@media (max-width: 1090px) { 
    .ngg-galleryoverview { padding-left: 60px; } 
} 

@media (max-width: 1070px) { 
    .ngg-galleryoverview { padding-left: 50px; } 
} 

@media (max-width: 1050px) { 
    .ngg-galleryoverview { padding-left: 40px; } 
} 

@media (max-width: 1030px) { 
    .ngg-galleryoverview { padding-left: 25px; } 
} 

@media (max-width: 1010px) { 
    .ngg-galleryoverview { padding-left: 20px; } 
} 

@media (max-width: 990px) { 
    .ngg-galleryoverview { padding-left: 10px; } 
} 

@media (max-width: 975px) { 
    .ngg-galleryoverview { padding-left: 120px; } 
} 

@media (max-width: 900px) { 
    .ngg-galleryoverview { padding-left: 80px; } 
} 

@media (max-width: 860px) { 
    .ngg-galleryoverview { padding-left: 60px; } 
} 

@media (max-width: 830px) { 
    .ngg-galleryoverview { padding-left: 40px; } 
} 

@media (max-width: 800px) { 
    .ngg-galleryoverview { padding-left: 15px; } 
} 

@media (max-width: 760px) { 
    .ngg-galleryoverview { padding-left: 0px; } 
} 

@media (max-width: 741px) { 
    .ngg-galleryoverview { padding-left: 110px; } 
} 

@media (max-width: 660px) { 
    .ngg-galleryoverview { padding-left: 80px; } 
} 

@media (max-width: 620px) { 
    .ngg-galleryoverview { padding-left: 25px; } 
} 

@media (max-width: 507px) { 
    .ngg-galleryoverview { padding-left: 20px; } 
}

答

这些行添加到您的style.css，你应该准备就绪：

.ngg-galleryoverview { text-align: center; } 
.ngg-gallery-list { display: inline-block; margin: 0; } 
.ngg-gallery-list li { float: none; display: inline-block; }

答

不知道使它尊重左填充，但这并工作，使整套缩略图来漂浮到中心。

.ngg-galleryoverview { 
text-align:center; 
} 

.ngg-gallery-thumbnail-box { 
float:none !important; 
display:inline-block; 
}

在Wordpress中心NextGen Gallery

相关推荐