Увеличьте высоту тега «p» и выровняйте центр

Question

Я создаю меню для моего сайта в ul.buttons. В нем у меня есть заголовок span.button-title, подзаголовок span и код p. Этот код должен быть выровнен вертикально по центру, половине заголовка и подзаголовку.

Как сделать для тега autura тег p (красным) будет иметь тот же autura, что и div.button. Я пытался height: 100%;, но не смог.

После того, как она осталась на той же высоте, я бы выровнял тег p по центру, по вертикали.

См. код.

Спасибо.

Answer 1

Я обновил ваш jsFiddle с некоторыми изменениями.

Во-первых, inline-block элементы не учитывают вертикальный размер.Поэтому необходимо изменить на block и выполнить горизонтальное выравнивание с float.

Тогда элементы не могут использовать height: 100%, если у их родителя нет фиксированной высоты.Затем была установлена ​​высота класса button.