Центр Галерея NextGen в Wordpress

Question

Я использую галерею NextGen на моем сайте Wordpress, но окно галереи не уважает левый край остальной части страницы (то есть все остальные изображения, текст и т. Д. Имеет некоторые вид отступов или отступов, но галерея NextGen полностью перемещается влево). Я бы хотел, чтобы он не перекрывал это дополнение или, по крайней мере, плавал к центру. Я пробовал редактировать CSS в нескольких местах, но я могу редактировать неправильный класс или что-то в этом роде. Пример галереи находится в нижней части страницы по адресу http://www.montereyhighdrama.com/multimedia/the-marriage-of-figaro-2010/ Спасибо.

Answer 1

Простой способ заключается в использовании:

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

Answer 2

Я была такая же проблема, но нужно решение, которое работало для всех NextGen галереи динамически, поэтому я использовал медиазапросы. BTW, я не нашел другого решения и не знаю, как использовать вышеуказанный код.

Я использую тему Catalyst/Dynamik, поэтому я могу установить точную ширину страницы и начальное заполнение контейнера # контейнера, но это не сделало ничего для центрирования эскизов или улучшения внешнего вида мобильного устройства.

Это мои медиа-запросы, вам нужно будет настроить размер вашего эскиза, я использовал 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 3

Добавьте эти строки в 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 4

Не знаю, что делает его уважать левый отступы, но это делает работу, чтобы сделать весь набор миниатюр для плавать в центр.

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

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