Question

I think this is a typical problem. I have following html

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

and css

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

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

I think height of editor-field is different among browsers and controls. But problem is that text in editor-label is always aligned on top. What is the best way to vertically center that text?

In my descent experience with css, I think best way is to set height of editor-field and editor-label to same and to use vertical-align tag. But in this case, I am not sure I want to do that because height of editor-fields will vary. Any idea would be appreciated.

UPDATE:

I didn’t want to change exisiting html so I just used jquery to set line-height and be done with it.

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

Answer 1

line-height of .editor-label matching the height of .editor-field’s input would get you a label that’s always centered.

Though I’m not sure if it’s your specific case, but that’s the whole point of the label element. You can do:

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

And no matter the height of input, the label will always center. (You can add a margin-left on input for spacing)