Альтернатива vertical-align [РЕШЕНО]

[Rashpil]

Добрый вечер. Посоветуйте, пожалуйста, альтернативу свойства Vertical-align. Нужно выровнять блок внутри блока. Сейчас внутренний блок прижат к верху родительского блока, а нужно что бы он был выровнен по центру вертикально. Вот код

<div class="box-product">
  <?php foreach ($products as $product) { ?>
  <div>
    <?php if ($product['thumb']) { ?>
    <div class="image"><a href="<?php echo $product['href']; ?>"><img src="<?php echo $product['thumb']; ?>" alt="<?php echo $product['name']; ?>" /></a></div>
    <?php } ?>
    <div class="fin">
 <div class="name"><a href="<?php echo $product['href']; ?>"><?php echo $product['name']; ?></a></div>
    <?php if ($product['price']) { ?>
    <div class="price">
	  <?php if (!$product['special']) { ?>
	  <?php echo $product['price']; ?>
	  <?php } else { ?>
	  <span class="price-old"><?php echo $product['price']; ?></span> <span class="price-new"><?php echo $product['special']; ?></span>
	  <?php } ?>
    </div>
    <?php } ?>
    <?php if ($product['rating']) { ?>
    <div class="rating"><img src="catalog/view/theme/default/image/stars-<?php echo $product['rating']; ?>.png" alt="<?php echo $product['reviews']; ?>" /></div>
    <?php } ?>
    <div class="cart"><input type="button" value="<?php echo $button_cart; ?>" onclick="addToCart('<?php echo $product['product_id']; ?>');" class="button" /></div>
 </div>
  </div>
  <?php } ?>
   </div>

Выровнять нужно <div class="image">. Если есть мысли - помогите, пожалуйста.

[CaptainPower]

у родительского дива в свойства ставишь

display: table-cell;

у потомка

vertical-align: middle;

[vivivor]

я бы задал фиксированную высоту главного блока и выровнял margin или padding

[Yurta]

http://habrahabr.ru/post/71236/

http://habrahabr.ru/post/73113/

[rb2]

http://stackoverflow.com/questions/4785871/css-vertical-align

http://www.jakpsatweb.cz/css/css-vertical-center-solution.html

И вообще, google "css vertical align" -- по-моему, все ссылки релевантные и информативные.

https://www.google.com.ua/search?client=opera&q=css+vertical+align&sourceid=opera&ie=utf-8&oe=utf-8&channel=suggest

[Rashpil]

Да способов много, но что-то ни один мне не помогает. У меня структура посложнее чем в примерах. И не могу разобраться где я допускаю ошибку. Всем спасибо за помощь! Если у кого-то будет свободная минутка, вот живой пример ( нужно выровнять изображения товаров в "лидерах продаж"), помогите пожалуйста. http://fishing-trade.com/

Я сижу разбираюсь, как только пойму в чем загвоздка - отпишусь. Всем спасибо за внимание. Буду очень признателен за помощь.

[vivivor]

ты хочешь в блоке размером в 108px выравнять изображение равное 100px ))

[Rashpil]

Почему 108? 108 - высота соседнего дочернего блока. Или все дело в нем? Но даже если так, то в следующем блоке его высота - 123px. И получается у пикчи отступ снизу 23px а сверху - 0px.

[vivivor]

в .box-product > div добавь height: 123px;

Добавь .box-product .fin .name{height: 30px;}

в .box-product .image img добавь margin-top: 11px;

Результат