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;
}

我认为编辑器字段的高度在浏览器和控件之间是不同的。但问题是编辑标签中的文本始终排在最前面。垂直居中该文本的最佳方法是什么？

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

更新：

我不想更改现有的html，所以我只是使用jquery设置行高并完成它。

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

Answer 1

与.editor-field输入的高度匹配的.editor-label的行高将为您提供一个始终居中的标签。

虽然我不确定这是否是你的具体情况，但这是标签元素的重点。你可以这样做：

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

无论输入的高度如何，标签总是居中。（您可以在输入中为间距添加边距左侧）