html - 如何将编辑器标签与css中的编辑器字段对齐

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

更新：

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

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

score 1 · Accepted Answer

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

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

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

并且无论输入的高度如何，标签都将始终居中。（您可以在输入上添加一个margin-left作为间距）

1 回答 1