IE7垂直對齊“內聯”元素

Question

我在IE7上有問題。我在輸入（頂部和底部）中添加了填充。 在Firefox和其他版本中，標簽顯示在中間，但在IE7中，標簽顯示在底部。在IE8中，標簽顯示在頂部。

我試圖將標簽設置為vertical-align:middle樣式，但是它不起作用。

它的提琴： http : //jsfiddle.net/w2wTA/4/

Answer 1

嘗試為“字段” div設置line-height ，並將line-height屬性設置為等於該line-height ：

#field {
    height: 40px;
    line-height: 40px;
}

編輯

您也可以嘗試將一個類添加到標簽和輸入中，並設置填充：

<div id="field">
    <label for="t" class="t">Input:</label> <input type="text" id="t" class="t">
</div>

css ：（以某種方式，內聯塊不起作用，因此使用浮點數的塊將達到目的，盡管我發現這有點“骯臟”）

.t{
    padding: 10px 0;
}

label{
    vertical-align: middle;
    display: block;
    float: left;
}

這似乎有效。 小提琴