Авторизация  
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;
}

 

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


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