html - 如何让我的 元素沿着 <input> 和 <textarea> 字段垂直居中？

Question

我无法让 p、input 和 textarea 元素都在 li 中居中我现在正在处理的用户设置区域中的元素。现在只有 input 和 textarea 元素在 li 元素中正确居中，而 p 元素是位于顶部。我已经尝试申请了

vertical-align: middle

到 li 元素，但它失败了。

我的 example code link is here at JS Bin

为了帮助指导您查看我的示例，每个元素的背景颜色如下:

• p = 红色
• li = 青色
• input & textarea = 白色

如何让 p、input 和 textarea 元素都在 li 元素中居中？

Answer 1

我了解到像 Twitter 和 Facebook 这样的网站使用以下 HTML 元素创建它们的设置页面:

• 表格
• 正文
• tr
• 第
• td
• 标签

所以我决定遵循这个标准做法并且this is what I came up with . CSS 样式不存在，但您可以看到 table 元素及其子元素提供的基本实体结构。请注意 table tbody tr th label 名称如何自动定位在其包含表格单元格的中心。如果我需要将它们定位到顶部、底部或基线，那么我需要做的就是将 vertical-align 添加到 label 的父元素，即 第。

This is the result of adding vertical-align: top; styling to the th element in the same row as the textarea.

如果我想在表格单元格中水平放置 label 元素，那么我需要做的就是在 上使用 text-align 选择器第 元素和 presto.

This is the result of adding text-align: right; to the 2nd th in the 2nd tr and the 3rd and 4th tr th elements.