Label Text Alignment in fieldset with CSS

Question

In my fieldset I have labels next (side) to my textboxes, but for some reason, they are towards the top and not middle. Here is my CSS for the fieldset:

fieldset {
  clear: both;
  font-size: 100%;
  border-color: #000000;
  border-width: 1px 0 0 0;
  border-style: solid none none none;
  padding: 10px;
  margin: 0 0 0 0;
}

label 
{
    font: bold 12px Verdana, Arial, Helvetica, sans-serif, MS UI Gothic;
    float: left;
    width: 12em;
    text-align:right;
    vertical-align:text-bottom;
}

What am I missing?

Is it mis-aligned in all browsers? What browsers are you using to test? — Zack The Human, Nov 03 '08 at 03:22

score 3 · Accepted Answer · answered Nov 03 '08 at 03:21

3

Try adjusting the line-height property for the label element. You may need to increase or decrease it.

answered Nov 03 '08 at 03:21

Zack The Human

8,373
7
39
60

score -1 · Answer 2 · answered Nov 03 '08 at 04:05

To me this is the most frustrating thing about css... Zack is right it will probably take some tweaking with the line-height, sometimes lots of tweaking (like 20px). i think that floating the element causes line height to be difficult?? if you want it in the middle of the line you should set vertical-align:middle; too.

hope this helps...

Label Text Alignment in fieldset with CSS

2 Answers2