css - IE7は垂直方向の「インライン」要素を整列させます

Question

IE7 に問題があります。入力 (上部と下部) にパディングを追加しました。Firefox などではラベルが真ん中に表示されますが、IE7 では下に表示され、IE8 では上に表示されます。

ラベルvertical-align:middleスタイルを設定しようとしましたが、うまくいきません。

score 0 · Accepted Answer

「フィールド」divの高さを設定し、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;
}

これはうまくいくようです。フィドル

1 に答える 1