Как я могу получить мои <p>элементы вертикально центрированными вдоль боковых <input>и <textarea>полей?

Question

Я не могу получить элементы p, input и textarea по центру в li элементах в области пользовательских настроек, над которыми я сейчас работаю.Прямо сейчас только элементы input и textarea правильно центрированы в элементах li, в то время как элементы p расположены прямо сверху.Я попытался применить

vertical-align: middle

к элементу li, но это не удалось.

Моя ссылка на пример кода здесь на JS Bin

Чтобы помочь вам при просмотре моего примера, цвет фона каждого элемента выглядит следующим образом:

• p = красный
• li = голубой
• input & textarea = белый

Как получить, чтобы элементы p, input и textarea были все центрированы в liэлементы?

Answer 1

Я узнал, что такие сайты, как Twitter и Facebook, создают свои страницы настроек со следующими элементами HTML:

• таблица
• TBODY
• тр
• й
• 1012 * тд *
• этикетки

Поэтому я решил следовать этой стандартной практике, и это то, что я придумал . Стили CSS не существует, но вы можете видеть ту основную твердую структуру, которую обеспечивают элемент table и его дочерние элементы. Обратите внимание, что имена table tbody tr th label автоматически располагаются в центре ячейки содержащей их таблицы. И если мне нужно, чтобы они были расположены сверху, снизу или на уровне базовой линии, все, что мне нужно сделать, это добавить vertical-align к родительскому элементу label, который равен th.

Это результат добавления стиля vertical-align: top; к элементу th в той же строке, что и textarea.

И если я хочу расположить элементы label горизонтально в ячейке таблицы, тогда все, что мне нужно сделать, это использовать селектор text-align для элемента th и presto.

Это результат добавления text-align: right; ко 2-му th во 2-м tr и 3-м и 4-м tr th элементах.