Jump to content
  • 0

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


hiko-sensei
 Share

Question

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

 

Имеется некая часть странички 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 by hiko-sensei
Link to comment
Share on other sites

4 answers to this question

Recommended Posts

  • 0

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

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

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

Link to comment
Share on other sites

  • 0

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

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

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

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

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy