在 Wordpress 中居中 NextGen 画廊答案

【问题标题】：Center NextGen Gallery in Wordpress在 Wordpress 中居中 NextGen 画廊
【发布时间】：2013-03-02 17:46:45
【问题描述】：

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

【问题讨论】：

标签： wordpress nextgen-gallery

【解决方案1】：

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

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

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

【讨论】：

【解决方案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; }

【讨论】：

【解决方案3】：

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

我使用的是 Catalyst/Dynamik 主题，因此我可以设置精确的页面宽度和 #container-wrap 初始填充，但这对缩略图居中或改善移动设备外观没有任何作用。

这些是我的媒体查询，您必须根据缩略图大小进行调整，我使用的是 220 像素宽。

最终结果：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; }
}

【讨论】：

【解决方案4】：

简单的方法是使用：

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

【讨论】：

第一种方法使用<center>，这是一个已弃用的标签。
无论如何都不起作用，因为它被应用于已经居中且宽度为 100% 的包含元素。您只需要 .ngg-gallery-thumbnail-box { float:none !important;显示：内联块； }