0

これは典型的な問題だと思います。私は次のhtmlを持っています

<div class="editor-label">Group Name:       </div>
<div class="editor-field"><input type="text"></input></div>

とcss

.editor-label {
float: left;
width: 200px;
margin-bottom: 4px;
margin-right: 10px;
text-align: right;
}

.editor-field {
float: left;
width: 300px;
}

ブラウザやコントロールによってエディタフィールドの高さが違うと思います。しかし、問題は、エディター ラベルのテキストが常に上に配置されることです。そのテキストを垂直方向に中央揃えにする最良の方法は何ですか?

css に関する私の降下経験では、editor-field と editor-label の高さを同じに設定し、vertical-align タグを使用するのが最善の方法だと思います。しかし、この場合、エディターフィールドの高さが異なるため、それをやりたいかどうかはわかりません。任意のアイデアをいただければ幸いです。

アップデート：

既存の html を変更したくなかったので、jquery を使用して line-height を設定し、それで完了しました。

$(document).ready(function () {
    $(".editor-label").css("line-height", $(".editor-field").css("height"));
});
4

1 に答える 1

1

.editor-field の入力の高さと一致する .editor-label の行の高さは、常に中央に配置されたラベルを取得します。

それがあなたの特定のケースかどうかはわかりませんが、それが label 要素の要点です。できるよ：

<label>Group Name: <input type='text'/></label>

入力の高さに関係なく、ラベルは常に中央に表示されます。(間隔のために入力に左マージンを追加できます)

于 2012-08-10T16:58:59.243 に答える