Aligning text vertically inside a label div

Question

I'm trying to recode one of my older forms. It was filled with tables that I want to replace with CSS. However I'm having trouble having text and a form element aligned vertically together. As the picture shows the text defaults to starting at the top instead of in the middle. The blue highlights around the row is dreamweavers interpretation / selection of what is going on.

I have label and input divs, both floated left, inside a div called #light, which is inside a general container. This is what my css code looks like:

#contentBox{
 width: 600px;
 float: left;
 background-color: #e2e2e2;
 overflow: auto;
 border-color: #c5c5c5;
 border-width: 1px;
 border-style: solid;
 font-size: 12px;
}
#light {
 float: left;
 width: 500px;
 padding: 15px;
 background-color: #e2e2e2;
 margin: 7px;
 border-color: #c5c5c5;
 border-width: 1px;
 border-style: solid;
 vertical-align: middle;
}
input {
 float: right;
 width: 20em;

}
label {
 float: left;
 text-align: right;
 vertical-align: baseline;
}

Any idea what the problem is? I've tried swapping around the vertical-align in different divs, floating in different directions, getting rid of the label but I just end up with more problems rather than less.

Answer 1

You cannot use vertical-align on elements unless they are table cells (or displayed as such) as this article explains. Set line-height to the element height if you've only got one row of text.

Answer 2

Vertical alignment of text can be incredibly annoying or incredibly easy.

If the size of all the involved elements are known, your best bet is to set manual padding/margins on the text itself to make sure it's aligned.

If the content you want to center vertically is dynamic, this is your best bet.

Answer 3

Not sure, but your input tag is set to "float:right", so its height won't be taken into account by the parent. Hence, the height of the parent is actually probably the height of the label (I suspect dreamweaver is not interpreting correctly what browsers do.) Try to remove the float on the input tag and see if it makes a difference.

Answer 4

Usually, to solve that problem, I use the line-height property:

Ex:

div{width:600px;font:normal normal 12px/30px Arial, Helvetica, sans-serif;}

This will set the font to 12px, and the line-height to 30px, keeping the font vertically align within the 30px of its line.

Answer 5

Vertical alignment can be applied only to inline elements. The best solution is to modify your HTML and make it like in this examples

Answer 6

You could go for a 'cheap' solution and apply a padding-top to the label divs.