在标签中垂直对齐文本div

Example of problem http://img638.imageshack.us/img638/3733/97914817.jpg 在标签中垂直对齐文本div

我试图重新编码一个旧的表单。它充满了我想用CSS取代的表格。不过，我无法将文本和表单元素垂直排列在一起。如图所示，文本默认从顶部开始，而不是从中间开始。该行周围的蓝色突出部分是梦织布者对正在发生的事情的解释/选择。

我有标签和输入div，都浮在左侧，在一个名为#light的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; 
}

任何想法是什么问题是？我尝试在不同的divs中调换垂直对齐，向不同的方向漂浮，摆脱标签，但我最终遇到的问题更多而不是更少。

来源

2010-07-15 Flarex

通常情况下，要解决这个问题，我使用line-height属性：

例：

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

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

来源

2010-07-15 19:10:24 Zuul

这确实解决了文本未对齐的问题，但现在输入框将偏离中心。出于某种原因，将输入div的高度设置为与行高不一致，其中一个或另一个将略微偏离中心 – Flarex 2010-07-19 14:37:32

想象一下，您的输入为12px的文本，它将需要一些填充以避免文本里面用输入边框填塞，所以，添加padding：3px;然后，对于30px的线宽，你仍然需要12px（12px + 3px + 3px = 18px）add例如margin：6px 0; （如果您需要，将发布一个工作示例！ – Zuul 2010-07-19 14:45:27