如何在css中将editor-label与editor-field对齐

Question

我认为这是一个典型的问题。我有下面的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;
}

我认为编辑器字段的高度在不同的浏览器和控件中是不同的。但问题是editor-label中的文本总是在顶部对齐。将文本垂直居中的最佳方法是什么？

在我使用css的经验中，我认为最好的方法是将editor-field和editor-label的高度设置为相同，并使用垂直对齐的标签。但在这种情况下，我不确定是否要这样做，因为编辑字段的高度会有所不同。任何想法都将不胜感激。

更新：

我不想改变已有的html，所以我只是使用jquery来设置line-height，然后就完成了。

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

Answer 1

line-height of .edit- label匹配.edit-field的输入高度将得到一个始终居中的标签。

虽然我不确定这是否是您的特定情况，但这就是label元素的全部意义所在。您可以执行以下操作：

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

无论输入的高度如何，标签始终居中。(您可以在输入上添加页边距-left作为间距)