在Wordpress中心NextGen Gallery

我在我的Wordpress網站上使用了NextGen Gallery，但圖庫框不尊重頁面其餘部分的左邊距（也就是說，所有其他圖像，文本等都有一些一些縮進或填充，但NextGen畫廊一直漂浮到左側）。我想阻止它覆蓋這個填充，或者至少浮到中心位置。我試過在幾處編輯CSS，但我可能會編輯錯誤的類或其他東西。畫廊的一個例子是在http://www.montereyhighdrama.com/multimedia/the-marriage-of-figaro-2010/頁面的底部附近謝謝。在Wordpress中心NextGen Gallery

來源

2013-03-02 user2057593

-2

簡單的方法是使用：

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

來源

2013-03-29 18:52:45

第一種方法使用'

'這是一個不推薦的標籤。 – 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; } 
}

來源

2013-06-25 16:03:44 user2520854

這些行添加到您的style.css，你應該準備就緒：

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

來源

2013-08-01 17:17:33 cfx

不知道使它尊重左填充，但這並工作，使整套縮略圖來漂浮到中心。

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

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

來源

2013-11-01 18:56:18 lydia

在Wordpress中心NextGen Gallery

回答

相關問題