如何在css中将编辑器标签与编辑器字段对齐

我认为这是一个典型的问题。我有以下的HTML如何在css中将编辑器标签与编辑器字段对齐

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

UPDATE：

我不想改变exisiting HTML所以我只是用jQuery来设置行高和用它做。匹配。编辑字段输入的高度。编辑标签的

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

来源

2012-08-10 Tae-Sung Shin

的line-height会得到你，总是为中心的标签。

虽然我不确定它是否是您的特定情况，但这是标签元素的全部要点。你可以这样做：

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

而且不管输入的高度，标签将始终中心。（您可以在输入间距上添加空白）

来源

2012-08-10 16:58:59 Brian

如何在css中将编辑器标签与编辑器字段对齐

回答

相关问题