在標簽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。