将标签与输入垂直对齐

Question

I am currently converting an old HTML form to not use tables. The label requires a fixed width, which I've achieved using an answer from this site. The current code is as follows:

HTML

<div id="form">
    <label for="field1">Name&nbsp;</label>
    <input type="text" id="field1" value="default name" />
</div>

CSS

label {
    float: left;
    width: 50px;
    white-space: nowrap;
}
input {
    display: block;
    overflow: hidden;
    width: *;
}
#field1 {
    width: 150px;
}

Currently, the label is vertically aligned at the top. How can I vertically align the label and field to the centre?

Edit : I'm getting a lot of answers to basically pad my label into the correct position via a specified number of pixels. I don't want to do that as it's basically hard-coding and not true vertical alignment to the middle.

Following some advice I've received here, I've cleaned up my code some. See the above edited code.

I've tried vertical-align: middle; in label but it doesn't work. Please note that the user's platform will be IE.

Answer 1

If I get this right, You want the label and the input to vertically center align WRT each other and not the page. For that, there are couple of ways.

The Flexbox Way

If you want to use something new from the CSS world and be future ready, use flexbox. Example -

 .fieldHeading { width: 50px; } .fieldSpan { overflow: hidden; } #field1 { width: 150px; } /*flexbox approach. * height and background added for clarity. */ #form { height: 100px; background: #bada55; display: flex; align-items: center; } 

 <div id="form"> <label for="field1" class="fieldHeading">Name&nbsp;</label> <span class="fieldSpan"><input type="text" id="field1" value="default name" /></span> </div> 

The vertical-align Way

This works well when you have both the label and the input on one line as inline-block elements. Example -

 .fieldHeading { width: 50px; vertical-align:middle; } .fieldSpan { overflow: hidden; vertical-align:middle; } #field1 { width: 150px; } 

 <div id="form"> <label for="field1" class="fieldHeading">Name&nbsp;</label> <span class="fieldSpan"><input type="text" id="field1" value="default name" /></span> </div> 

The height & line-height Duo

This works well too but if your label is big and has the possibility of wrapping into multiple lines, it's gonna look terrible. Example -

 .fieldHeading { width: 50px; } .fieldSpan { overflow: hidden; } #field1 { width: 150px; } /*line-height and height be same for parent * background added for clarity. */ #form { line-height: 40px; height: 40px; background: #bada55; } 

 <div id="form"> <label for="field1" class="fieldHeading">Name&nbsp;</label> <span class="fieldSpan"><input type="text" id="field1" value="default name" /></span> </div> 

I hope these help you not only in this problem but for all other vertical alignment problems.

Answer 2

You can use line-height or margin-bottom until you get satisfactory results.

Example

#form label {
    line-height:1.4;
    margin-bottom:2px;
}

This will apply the selector to all labels under the form. If you want to be specific, you can use the specific css class like .fieldHeading instead of #form label .

Answer 3

Do you need like this?

<div id="form">
    <div class="valign">
        <label for="field1" class="fieldHeading">Name&nbsp;</label>
        <span class="fieldSpan"><input type="text" id="field1" value="default name" /></span>
    </div>
</div>

<style>
.fieldHeading {
    float: left;
    width: 50px;
}
.fieldSpan {
    display: block;
    overflow: hidden;
    width: *;
}
#field1 {
    width: 150px;   
}

#form {display: table;height:100%;}

.valign {
    display: table-cell;
    vertical-align: middle; 
}

</style>

Answer 4

I think, solution margin-bottom, use whatever px you want

.fieldHeading {
    float: left;
    width: 50px;
    margin-bottom: 3px;
}

Answer 5

Use:

.fieldHeading {
  display: inline-block;
  width: 50px;
  vertical-align: middle;
}
#field1 { width: 150px; }

Let span be an inline type.

You don't really need the span for enclosing your input element.