ansaurus

Question

Answer 1

A:

To do this you should alter the vertical-align property of the input.

<dd><label class="<?=$email_confirm_class;?>" style="text-align:right; padding-right:3px">Confirm Email</label><input class="text" type="text" style="vertical-align: middle; border:none;" name="email_confirm" id="email_confirm" size="18" value="<?=$_POST['email_confirm'];?>" tabindex="4" /> *</dd>

Here is a more complete version. It has been tested in IE 8 and it works. see the difference by removing the vertical-align: middle from the input:

<html><head></head><body><dl><dt>test</dt><dd><label class="test" style="text-align:right; padding-right:3px">Confirm Email</label><input class="text" type="text" style="vertical-align: middle; font-size: 22px" name="email_confirm" id="email_confirm" size="28" value="test" tabindex="4" /> *</dd></dl></body></html>

Robert Cabri 2009-10-12 14:39:56

In my experience text fields are quite hard to tame, and vertical padding works more reliably.

Wabbitseason 2009-10-12 14:42:20

`vertical-align` doesn't do anything here (IE 8).

Joey 2009-10-12 14:42:49

I've tested it in IE8 and FF (ubuntu) removed the vertical-align to see the effect and it is working perfectly. I updated the example as well.

Robert Cabri 2009-10-12 16:13:00

Answer 2

+2 A:

Have you tried line-height? It won't solve your problems if there are multiple row labels, but it can be a quick solution.

Wabbitseason 2009-10-12 14:40:36

Answer 3

A:

This is what I usually do to "vertical align" text inside labels:

label {
   display: block;
   float: left;
   padding-top: 2px; /*This needs to be modified to fit */
}

It won't scale very nicely, but it works.

peirix 2009-10-12 14:48:23

Answer 4

+1 A:

Vertical alignment is a common issue with CSS. Basically, it doesn't work as you'd expect it to, unless you apply it to a <td>.

Here's a good explanation.

Matt Ball 2009-10-12 14:48:48

Answer 5

A:

The vertical-align style is used in table cells, so that won't do anything for you here.

To align the labels to the input boxes, you can use line-height:

line-height: 25px;

Guffa 2009-10-12 14:50:20

Answer 6

+2 A:

Vertical alignment only works with inline or inline-block elements, and it's only relative to other inline[-block] elements. Because you float the label, it becomes a block element.

The simplest solution in your case is to set the label to display: inline-block and add vertical-align: middle to the labels and the inputs. (You might find that the height of the text is such that vertical align won't make any difference anyway.)

DisgruntledGoat 2009-10-12 15:40:53

Answer 7

+1 A:

I came across this trying to add labels o some vertical radio boxes. I had to do this:

<%: Html.RadioButton("RadioGroup1", "Yes") %><label style="display:inline-block;padding-top:2px;">Yes</label><br />
<%: Html.RadioButton("RadioGroup1", "No") %><label style="display:inline-block;padding-top:3px;">No</label><br />
<%: Html.RadioButton("RadioGroup1", "Maybe") %><label style="display:inline-block;padding-top:4px;">Maybe</label><br />

This gets them to display properly, where the label is centered on the radio button, though I had to increment the top padding with each line, as you can see. The code isn't pretty, but the result is.

Mike Pateras 2009-12-16 02:57:06

ansaurus

tags:

views:

answers:

Vertical Align text in a Label

related questions