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

【问题标题】：How can I get my <p> elements to be vertically centered along side <input> and <textarea> fields?如何让我的 <p> 元素沿着 <input> 和 <textarea> 字段垂直居中？
【发布时间】：2010-08-15 21:14:01
【问题描述】：

我无法将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 元素为中心？

【问题讨论】：

用label 元素替换p 元素（因为您的输入标签是标签而不是段落）。这样您就不会遇到处理段落及其所有相关边距和块状的问题。不要忘记for 属性。
@David... 我认为这不适用于文本区域。但是 +1 b/c 它适用于 <input> 元素
@David 好主意。谢谢。我在 Twitter 上的设置>个人资料页面上看到了这个。他们使用表格来组成他们的设置页面。我想知道我是否应该这样做。

标签： html css center vertical-alignment

【解决方案1】：

我了解到 Twitter 和 Facebook 等网站使用以下 HTML 元素创建其设置页面：

表格
身体
tr
第
td
标签

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

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

如果我想在表格单元格中水平放置label 元素，那么我需要做的就是在th 元素上使用text-alignselector 并使用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.

【讨论】：