在标签div中垂直对齐文本

Question

问题示例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中围绕垂直对齐交换，以不同的方向浮动，摆脱了标签，但最终我遇到的问题更多而不是更少。

Answer 1

您不能使用vertical-align的元素，除非它们是表格单元格（或显示等）的这篇文章解释说。 如果只有一行文本，请将line-height设置为元素高度。

Answer 2

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

例如：

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

这会将字体设置为12px，将行高设置为30px，使字体在其行的30px之内垂直对齐。

Answer 3

文本的垂直对齐可能会令人讨厌或难以置信。

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

如果您想垂直居中的内容是动态的， 这是您最好的选择 。

Answer 4

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

Answer 5

垂直对齐只能应用于内联元素。 最好的解决方案是修改HTML并使其像本示例中所示

Answer 6

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