Вертикальное выравнивание в ячейке, проблема с <div>

[hiko-sensei]

Здравствуйте!

 

Имеется некая часть странички http://samsung.com/ru/support, которую я решил сверстать сам для тренировки построения сеток

 

Возникла следующая проблема: при попытке выровнять картинку по вертикали и заключении ее в тег <div> выравнивание не работает, как и если картинку в какой-либо тег не заключать. Но как только я оборачиваю картинку в тег <p> выравнивание работает. Никак не могу понять причины, ведь теги <p> и <div> оба блочные.

Гуглил свойства обоих тегов, но ничего по теме не нашел.

Помогите, пж-та, разобраться

 

Вот код с <p>, где все работает: http://codepen.io/anon/pen/xwyGWE?editors=110

Вот код с <div> (В него заключен первый элемент), где выравнивание не работает: http://codepen.io/anon/pen/dYwpvQ

 

Прошу помощи и критики (изучаю верстку пару месяцев, может быть где есть грубые ошибки)

 

Спасибо!

Edited November 12, 2015 by hiko-sensei

[jdk]

Можно просто задать одинаковый отступ сверху для родительского блока. Или вот так

Edited November 13, 2015 by jdk

[hiko-sensei]

jdk, спасибо большое вам за помощь, но мой вопрос заключается немного в другом

Почему <p>реагирует на вертикальное выравнивание, а <div> нет?

[andrey7287]

jdk, спасибо большое вам за помощь, но мой вопрос заключается немного в другом

Почему <p>реагирует на вертикальное выравнивание, а <div> нет?

p тоже не реагирует, это стандартный margin в 1em.

[Igor Schnaider]

jdk, спасибо большое вам за помощь, но мой вопрос заключается немного в другом

Почему <p>реагирует на вертикальное выравнивание, а <div> нет?

Как уже сказали, это поля параграфа.

По поводу выранивания: http://codepen.io/anon/pen/jbdXVO