Html 在标签div内垂直对齐文本

我正试图重新编码我的一个旧表单。它充满了我想用CSS替换的表格。但是，我在文本和表单元素垂直对齐时遇到问题。如图所示，文本默认为从顶部开始，而不是从中间开始。排周围的蓝色亮点是dreamweavers对正在发生的事情的解释/选择

我在一个名为light的div中有label和input 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中交换垂直对齐，在不同的方向上浮动，去掉标签，但我最终遇到的问题更多而不是更少。

除非元素是表格单元格或显示如图所示，否则不能在元素上使用垂直对齐。如果只有一行文本，请将行高设置为元素高度。

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

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

---

如果要垂直居中的内容是动态的，.

不确定，但您的输入标记设置为float:right，因此父级不会考虑其高度。因此，父对象的高度实际上可能是标签的高度，我怀疑dreamweaver没有正确解释浏览器的功能。尝试删除输入标记上的浮动，看看它是否有区别。

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

例：

---

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

垂直对齐只能应用于内联元素。

---

最好的解决方案是修改HTML并使其与

类似。您可以选择“便宜”的解决方案，并在标签div上应用填充顶。

错误。垂直对齐仅适用于具有“显示：表格单元格”的元素。img具有垂直对齐功能。例如，这确实解决了文本未对齐的问题，但现在输入框将偏离中心。由于某些原因，将输入div的高度设置为与行高度相同的高度不起作用，其中一个将稍微偏离中心设想您的输入为12px的文本，它将需要一些填充以避免文本内部与输入边框对齐，因此，添加填充：3px；，然后，对于30px的线宽，您仍然需要12px 12px+3px+3px=18px添加例如边距：6px 0；如果您需要，将发布一个工作样本！

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