在標籤中垂直對齊文本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