Перейти к содержанию
Rashpil

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

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

Добрый вечер. Посоветуйте, пожалуйста, альтернативу свойства 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">. Если есть мысли - помогите, пожалуйста.

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


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

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

display: table-cell;

у потомка

vertical-align: middle;

  • +1 1

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


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

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

  • +1 1

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


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

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


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

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

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

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


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

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

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


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

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

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


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

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

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

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

Результат

2013-02-02_144428.png

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


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

  • Последние посетители   0 пользователей онлайн

    Ни одного зарегистрированного пользователя не просматривает данную страницу

×

Важная информация

На нашем сайте используются файлы cookie и происходит обработка некоторых персональных данных пользователей, чтобы улучшить пользовательский интерфейс. Чтобы узнать для чего и какие персональные данные мы обрабатываем перейдите по ссылке. Если Вы нажмете «Я даю согласие», это означает, что Вы понимаете и принимаете все условия, указанные в этом Уведомлении о Конфиденциальности.