Друзья, добрый день. Второй раз сталкиваюсь и не пойму в чем дело. Значит, верстаю на бутстрапе, при макетировании быстреньком добавляю в 3 дива сетку товаров:
div.col-md-3>div.item>div.item-header+div.item-body
задаю header position:relative; top:50%; и он у меня выводится ровно по центру. Потом через какое-то время копаю код, доделываю, собираю, усложняю вывод товаров. И в какой-то момент позиционирование не работает, 0 реакции.
Сейчас код товара выглядит так:
<div class="col-md-3">
<div class="productGrid_item">
<div class="productGrid_header">
</div>
<div class="productGrid_body">
<div class="productGrid_photo">
{item.photo}
</div>
<div class="productGrid_name">
<a> {item.name} </a>
</div>
</div>
</div>
</div> <!-- col-md-3 -->
Собственно, .productGrid_name сейчас висит внизу, у родителей у всех relative, у нее absolute, позиционирую чуть от низа и слева ~15рх, на девайсах не улетает куда попало, но это немного не то.
Вопрос: как выводить .productGrid_name точно в top:50% (по центру родителя)?
Переформулирую вопрос без примера выше: как выводить дитя блока с помощью position:relative: top:50% / bottom:50% (ровно по центру короч) когда у родителя высота зависит от контента детей (фото)?
И вообще может я не так делаю, а ларчик открывается просто?
О. чудо, через абсолют 50% заработало. Но раз уже написал, поделитесь, как вы позиционируете блок по центру внутри другого блока?
Пора уже переходить на флекс-боксы мб?
Средний
