在标签 div 内垂直对齐文本答案

【问题标题】：Aligning text vertically inside a label div在标签 div 内垂直对齐文本
【发布时间】：2010-07-15 18:48:27
【问题描述】：

Example of problem http://img638.imageshack.us/img638/3733/97914817.jpg

我正在尝试重新编码我的旧表单之一。它充满了我想用 CSS 替换的表格。但是，我无法将文本和表单元素垂直对齐。如图所示，文本默认从顶部而不是中间开始。行周围的蓝色突出显示是 Dreamweavers 对正在发生的事情的解释/选择。

我有标签和输入 div，它们都向左浮动，位于一个名为 #light 的 div 内，该 div 位于一个通用容器内。这是我的 css 代码的样子：

#contentBox{
 width: 600px;
 float: left;
 background-color: #e2e2e2;
 overflow: auto;
 border-color: #c5c5c5;
 border-width: 1px;
 border-style: solid;
 font-size: 12px;
}
#light {
 float: left;
 width: 500px;
 padding: 15px;
 background-color: #e2e2e2;
 margin: 7px;
 border-color: #c5c5c5;
 border-width: 1px;
 border-style: solid;
 vertical-align: middle;
}
input {
 float: right;
 width: 20em;

}
label {
 float: left;
 text-align: right;
 vertical-align: baseline;
}

知道问题是什么吗？我尝试在不同的 div 中交换垂直对齐，在不同的方向上浮动，摆脱标签，但我最终遇到的问题更多而不是更少。

【问题讨论】：

标签： html css webforms

【解决方案1】：

您不能在元素上使用vertical-align，除非它们是表格单元格（或显示为表格单元格），正如this article 解释的那样。如果您只有一行文本，请将 line-height 设置为元素高度。

【讨论】：

【解决方案2】：

通常，为了解决这个问题，我使用 line-height 属性：

例如：

div{width:600px;font:normal normal 12px/30px Arial, Helvetica, sans-serif;}

这会将字体设置为 12 像素，将行高设置为 30 像素，保持字体在其行的 30 像素内垂直对齐。

【讨论】：

这确实解决了文本不对齐的问题，但是现在输入框会偏离中心。出于某种原因，将输入 div 的高度设置为与 line-height 相同的高度不起作用，一个或另一个会稍微偏离中心
想象你的输入是一个 12px 的文本，它需要一些 padding 来避免里面的文本与输入边框折叠，所以，添加 padding:3px;，然后，添加到 line-weight 30px，你仍然需要 12px (12px + 3px + 3px = 18px) 添加例如 margin:6px 0; （如果您需要，将发布一个工作示例！

【解决方案3】：

文本的垂直对齐可能非常烦人或非常容易。

如果所有相关元素的大小已知，最好的办法是在文本本身上设置手动填充/边距以确保对齐。

如果要垂直居中的内容是动态的，this is your best bet。

【讨论】：

【解决方案4】：

不确定，但您的输入标签设置为“float:right”，因此父级不会考虑其高度。因此，父级的高度实际上可能是标签的高度（我怀疑 Dreamweaver 没有正确解释浏览器所做的事情。）尝试删除输入标签上的浮点数，看看是否有区别。

【讨论】：

【解决方案5】：

垂直对齐只能应用于内联元素。最好的解决方案是修改您的 HTML 并使其像 this examples

【讨论】：

错了。垂直对齐仅适用于带有display: table-cell 的元素。
img 有垂直对齐（参见例如w3schools.com/cssref/pr_pos_vertical-align.asp）

【解决方案6】：

您可以选择“便宜”的解决方案并将padding-top 应用于标签 div。

【讨论】：