Выравнивание миниатюр по центру - не работает (настройки выставлены) - страница 2 - JoomGallery

Пара отвлеченных примеров или причем тут flex

Пример с flex
http://codepen.io/anon/pen/PbZmbJ

пример без flex
http://codepen.io/anon/pen/vyLmgg

P.S. я не против Flex просто он в IE только с 11 версии поддерживается =)

Контейнер становится flex, содержимое центрируется. Далее заменить:

Спойлер

[свернуть]

Признаться, не совсем понял пример, у меня в обоих случаях меж строк огромные расстояния. Смотрю в Firefox и Chrome.

Вот так выглядит:

Спойлер

[свернуть]

значит не все правила внес что написано, не удалил старые.

старые правила не удалил.
Ужимание фото потому, что при уменьшении экрана фото не помещаются в одну строку. Чтобы не налазить друг на друга- они немного уменьшаются.
Так как у вас в строке по 4 фото, то одно фото будет всегда перескакивать на новую строку "в одиночестве" без уменьшения, поэтому их немного надо уменьшать до тех пор пока фото станут "перескакивать только по 2" этот параметр задается в @media запросе width

не удалил старые правила. Написал же: (ЗАМЕНИТЬ правила этими)
Одно фото переходит на ряд ниже, потому что у вас В каждом Ряду по 4фото, когда срабатывает медиа запрос @media то картинки не сжимаются а переносятся на новую строку.

уменьши размер @media (см.ниже) чтобы перестало быть кошерно.

потому что у вас правило срабатывает "навигацию делать по центру"

template.css:2473
@media (max-width: 720px)
.navigation {
    padding: 0 0 30px 0;
    position: relative;
    text-align: center;
}

Так как вы не полностью удалили старые правила, то они мешают новым. Удаляйте вот это:

Спойлер

[свернуть]

/*
    padding: 3px;
    margin: 0.6em;
*/

2. строка постраничной навигации на Вашем скриншоте по центру, у меня смещена вправо (2-й скриншот).

потому что у вас правило срабатывает "навигацию делать по центру"

template.css:2473
@media (max-width: 720px)
.navigation {
    padding: 0 0 30px 0;
    position: relative;
    text-align: center;
}

Спойлер

[свернуть]

комментить надо было:
/j3/media/joomgallery/css/joom_settings.css:31
.jg_element_cat {
    /*width: 24%;*/
    float: left;
    text-align: center !important;
}

поставьте ширину страницы для .subpage не 800px а 820px тогда по ширине фото станут оригинальными (не влазят по ширине вот и уменьшены)

.subpage, .breadcrumb > ul {
    max-width: 820px;
}

.subpage {
    background: #ffffff;
    margin: 0 auto;
    max-width: 820px;
    margin: 0 auto;
}

так допишите:

media/joomgallery/css/joomgallery.css:270

.jg_catelem_photo, .jg_photo_container a {
    display: inline-block;
    border: 1px solid #CCCCCC;
    padding: 4px;
    margin: 4px;
}