Как я могу сделать так, чтобы мои элементы<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
• тр
• го
• тд
• этикетка

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

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

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

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