Авторизация  
VaM

Как выровнять картинки по вертикали по центру, в списке товара в категории?

Рекомендуемые сообщения

VaM

По умолчанию картинка выравнивается по верхнему краю (по вертикали).

Чтобы выравнивать по вертикали по центру, в /templates/vamshop1/module/product_listing/ меняйте:

				{if $module_data.PRODUCTS_SPECIAL > 0}<div class="description"><span class="discount">-{$module_data.PRODUCTS_SPECIAL|round}%</span></div>{/if}
				<a href="{$module_data.PRODUCTS_LINK}" class="image"><img src="{$module_data.PRODUCTS_IMAGE}" alt="{$module_data.PRODUCTS_NAME}" /><span class="frame-overlay"></span><span class="price">{$module_data.PRODUCTS_PRICE}</span>{if $module_data.PRODUCTS_LABEL}{$module_data.PRODUCTS_LABEL}{/if}</a>
			<div class="inner notop nobottom text-left">
				<h4 class="title"><a href="{$module_data.PRODUCTS_LINK}">{$module_data.PRODUCTS_NAME}</a></h4>

на:

				{if $module_data.PRODUCTS_SPECIAL > 0}<div class="description"><span class="discount">-{$module_data.PRODUCTS_SPECIAL|round}%</span></div>{/if}
            <div class=frame>
                <span class="helper"></span><a href="{$module_data.PRODUCTS_LINK}"><img src="{$module_data.PRODUCTS_IMAGE}" alt="{$module_data.PRODUCTS_NAME}" /></a>
            </div>
			<div class="inner notop nobottom text-left">
				<h4 class="title"><a href="{$module_data.PRODUCTS_LINK}">{$module_data.PRODUCTS_NAME}</a></h4>
				<h4 class="title">{$module_data.PRODUCTS_PRICE}</h4>

В /templates/vamshop1/local.css добавьте стили:

.frame {
    height: 250px;      /* equals max image height */
    white-space: nowrap;
    text-align: center; margin: 1em 0;
}

.helper {
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

.img img {
    background: #3A6F9A;
    vertical-align: middle;
    max-height: 250px;
}

 

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Для публикации сообщений создайте учётную запись или авторизуйтесь

Вы должны быть пользователем, чтобы оставить комментарий

Создать учетную запись

Зарегистрируйте новую учётную запись в нашем сообществе. Это очень просто!

Регистрация нового пользователя

Войти

Уже есть аккаунт? Войти в систему.

Войти
Авторизация