Vertically align label and textbox

Question

my problem is a little different from others that I found out on internet. I have two column layout and each is of 50% between that I have my label and input fields. The problem is the text of the label, sometimes its quite lengthy and sometimes its just one word. I have tried everything but I just cannot get the text to be vertically center aligned. Things I have tried line-height vertically-align display

Answer 1

The display:inline-block declaration is not fully supported by IE7 and below, so you have to use display:inline instead in conjunction with the zoom:1 hasLayout hack to imitate the declaration with the star hack to target IE7. To align both the textbox and labelwe can use the vertical-align:middle property, like so:

CSS

input.textBox {
    margin-top: 5px;
    margin-bottom: 5px;
    height: 30px;
    width: 350px;
    font-size: 15px;
    font-family: Verdana;
    line-height: 30px;
    display:inline-block; 
    *display: inline;     /* for IE7*/
    zoom:1;              /* for IE7*/
    vertical-align:middle;
}

label.inputLabel {
    font-family: Verdana;
    font-size: 15px;
    line-height: 30px;
    display:inline-block;
    *display: inline;     /* for IE7*/
    zoom:1;              /* for IE7*/
}