Question

我在我的Wordpress网站上使用了NextGen图库，但是图库框不尊重页面其余部分的左边距（也就是说，所有其他图像，文本等都有某种缩进或填充，但是NextGen Gallery一直向左浮动）。我想防止它覆盖这个衬垫，或者至少浮动到中心。我曾尝试在几个地方编辑css，但我可能正在编辑错误的类或其他东西。该图库的一个示例位于页面底部http://www.montereyhighdrama.com/multimedia/the-marriage-of-figaro-2010/谢谢。

Answer 1

不知道如何尊重左边填充，但这确实可以使整个缩略图集浮动到中心。

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

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

Answer 2

将这些行添加到style.css，您应该全部设置：

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

Answer 3

我遇到了同样的问题，但需要一个适用于所有nextgen画廊的解决方案，因此我使用了媒体查询。顺便说一句，我找不到任何其他解决方案，也不知道如何使用上面的代码。

我正在使用Catalyst / Dynamik主题，因此我可以设置一个确切的页面宽度和＃container-wrap初始填充，但这对于缩放缩放或改善移动设备外观没有任何作用。

这些是我的媒体查询，您必须调整缩略图大小，我使用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; }
}

Answer 4

简单的方法是使用：

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

Wordpress中的NextGen画廊

4 个答案: