1

Wordpress サイトで NextGen ギャラリーを使用していますが、ギャラリー ボックスはページの残りの部分の左余白を考慮していません (つまり、他のすべての画像、テキストなどには何らかのインデントやパディングがありますが、 NextGen ギャラリーはずっと左に浮いています)。このパディングを上書きしないようにするか、少なくとも中央に浮かないようにしたいと思います。いくつかの場所で css を編集しようとしましたが、間違ったクラスなどを編集している可能性があります。ギャラリーの例は、http://www.montereyhighdrama.com/multimedia/the-marriage-of-figaro-2010/のページの下部にあります。

4

4 に答える 4

3

左パディングを尊重することについてはわかりませんが、これはサムネイルのセット全体を中央に浮かせるように機能します。

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

.ngg-gallery-thumbnail-box {
float:none !important;
display:inline-block;
}
于 2013-11-01T18:56:18.207 に答える
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; }
于 2013-08-01T17:17:33.223 に答える
0

同じ問題がありましたが、すべての nextgen ギャラリーで動的に機能するソリューションが必要だったので、メディア クエリを使用しました。ところで、他の解決策を見つけることができず、上記のコードの使用方法がわかりません。

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; }
}
于 2013-06-25T16:03:44.897 に答える
-2

簡単な方法は次を使用することです：

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

于 2013-03-29T18:52:45.640 に答える