Вывод превью фотографий квадратами - 3 вопроса. - JoomGallery

1. Код в файле http://portfolio.architeon.info/modules/mod_joomimg/assets/mod_joomimg.css

Код

.joomimg_row {
    overflow: hidden;
    padding: 0.5em 0;
}

оставьте значение padding: 0.

И вообще... Firefox+Firebug = все ответы по стилям.
А использовать одновременно две галереи для таких задач - жесть.

мне куда проще было все решить с помощью FireBug, а не писать столько слов 

#phocagallery-module-ri {
    margin-left: 50px;
    margin-right: auto;
    text-align: center;
}

.joomimg56_imgct {
    float: left;
    width: 33% !important;
}

Ну попробуйте вывести модули отдельно друг от друга что ли? Может стили перекрываются или еще что нибудь.

Код

#phocagallery-module-ri {
    margin-left: 50px;
    margin-right: auto;
    text-align: center;
}

Код

.joomimg56_imgct {
    float: left;
    width: 33% !important;
}

ширину выставляйте по вкусу.

Дивы в модулях сделайте отступ слева сколько требуется. Все равно ширина фиксированная.
В общем с файрбагом работы на 5 минут.

Ну, в джум поставьте

Код

 .joomimg56_img {
    display: block;
    text-align: center !important;
    vertical-align: middle !important;
}

( а у меня, кстати, .joomimg65...) Это выровняет по центру. Посмотрите, что получится и там же поставьте необходимые маргины. Задайте для  .joomimg56_main конкретную ширину, ширина ячейки с фото будет 33%, ну и добавьте там маргины сверху и снизу для симметрии.
Может, еще

Код

.joomimg56_imgct {
    float: left;
    width: 33% !important;
}

мешает флоат?

Дивы в модулях сделайте отступ слева сколько требуется. Все равно ширина фиксированная.
В общем с файрбагом работы на 5 минут.

У вас же дивы плавающие (float: left, т.е. прижимающиеся к левой стороне друг за другом), как они могут быть выровнены по центру автоматом? Такого не бывает. Надо вручную задавать отступ слева. Это же элементарно, а вы хотите все автоматом. Можете и дальше экспериментировать с тегами center - это вам ничего не даст.
У вас же ширина сайта и ширина фото фиксированная? Исходите от этого. Ну или сходите к Google в конце концов.
http://www.google.ru/search?&rls=ru&q=float+left+align+center

И вообще к галереям этот вопрос никакого отношения не имеет. Это обычные проблемы верстки.

И вообще к галереям этот вопрос никакого отношения не имеет. Это обычные проблемы верстки.

Я спокойно выравняла на своем сайте, рецепт написал выше.

Код

к слову, не нашел в CSS ни ".joomimg56_imgct", ни ".joomimg56_img", ни "joomimg56_main" - вижу, что [url=https://addons.mozilla.org/ru/firefox/addon/1843]FireBug[/url] их показывает, но ни в одном CSS не нахожу.

- это стили из сss модуля. Но вы их впишите в темплейт цсс и ваш вариант будет превалировать.

.joomimg56_img {
    display: block;
    text-align: center !important;
    vertical-align: middle !important;
}

.joomimg56_imgct {
    float: left;
    width: 33% !important;
}

В связи с этим вопрос - почему нужно прописывать для каждого модуля отдельный стиль, ведь шаблон не должен быть привязан к модулям, тот же модуль Phoca так и остался слева - я стараюсь мыслить системно, неужели нельзя задать общее правило (стиль) для любого контента на будущее?

Ну, что делать, модуль же должен как-то выглядеть в принципе - поэтому у него есть свой стиль, свой CSS. Но стили шаблона главнее. Так что если вы видите неугодные стили из других источников, кроме template.css, смело переписывайте их по своему желанию - и стили шаблона перекроют исходный стиль модуля или компонента.

Кстати, на вражеском форуме, я anunja. Написала там пару рецептов, если интересно.

Код

.joomimg56_imgct {
    float: left;
    width: 33% !important;
}

- а это исходная комбинация, в ней была причина выравнивания фото по левому краю,

Код

float: left;

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

#tr-m-spotlight {
    font-size: 13px;
    line-height: 180%;
    padding: 0 10px 10px;
}

Должно же быть общее правило для всех, а то, как-то несистемно, главным должен быть кто-то один.

1. в модуле JoomGallery расстояния между фото были равными, как в модуле Phoca?
2. фото выводились строго по центру?

И попробуй вставить этот код в http://portfolio.architeon.info/modules/mod_joomimg/assets/mod_joomimg.css с заменой

Код

.joomimg_clr{
  clear:both;
}
.joomimg_row{
  overflow:hidden;
  padding:0;
}
.joomimg_row ul{
  padding-left:0;
  margin-left:0;
}
.joomimg_row ul li{
  list-style:none;
  background:none;
}
.joomimg56_main {
	width:477px;
	margin-left:80px;
}

Здесь надо поиграться с последним классом .joomimg56_main - значения я подбирал исходя из своего шаблона.

.joomimg56_main {
	width:400px;
	margin-left:80px;
}

И попробуй вставить этот код в http://portfolio.architeon.info/modules/mod_joomimg/assets/mod_joomimg.css с заменой

Код

.joomimg56_main {
	width:477px;
	margin-left:80px;
}

Здесь надо поиграться с последним классом .joomimg56_main - значения я подбирал исходя из своего шаблона.
Кстати, уберите из основного шаблона сайта классы этого модуля - они будут перекрывать CSS модуля.

.joomimg56_main {
	width:400px;
	margin-left:auto;
	margin-right:auto;
}

Код

#tr-m-spotlight {
    font-size: 13px;
    line-height: 180%;
    padding: 0 10px 10px;
}

вроде и так по центру?
Что еще нужно выровнять?

Я лично даже люблю все перекапывать и переписывать.

...почему нельзя этот же механизм прописать для модуля JoomGallery? 

При желании все можно. Но только автор модуля заложил именно такой потенциал. Модуль просто делит ширину на число столбцов и выравнивает по центру.
Дальнейшие вопросы лучше адресовать к автору модуля.))

Но только автор модуля заложил именно такой потенциал. Модуль просто делит ширину на число столбцов и выравнивает по центру.

Другими словами, авторы просто не предусмотрели этого в модуле mod_joomimg?

Ну а возможно отследить и вырезать код, который выравнивает в "Обзоре галерее" и применить его в модуле?

Возможно. Но я этим заниматься не буду.