CODEWITHSUNDEEP
htmlcss
Tom
Tom

Reputation: 1829

Best way to keep the label vertically aligned in a form?

I need my form to have label and input boxes vertically center aligned. I need to handle the scenario where the label goes to multiple line (because of fixed width) and scenario where textarea causes label to be top aligned.

What would be the best way to achieve this?

This is the fiddle

<div class="row">
  <div class="label"><label>label one</label></div>
  <div class="input"><input type="text" placeholder="one" /></div>
  <div class="clear"></div>
</div>

.label {
  float: left;
  width: 100px;
  margin-right: 10px;
  text-align: right;
}
.input {
  float: left;
  height: 25px;
  padding: 2px;
}
.row{ padding: 3px 0; }
.clear{ clear: both; }

Upvotes: 2

Views: 2061

Answers (2)

Stickers
Stickers

Reputation: 78676

You could use inline block instead of float.

.label, .input {
    display: inline-block;
    vertical-align: middle;
}

Updated Example

body {
    margin: 0;
}
.row {
    padding: 3px 0;
}
.label, .input {
    display: inline-block;
    vertical-align: middle;
}
.label {
    width: 100px;
    margin-right: 10px;
    text-align: right;
}
.input {
    height: 25px;
    padding: 2px;
}
<div class="row">
    <div class="label"><label>label one</label></div>
    <div class="input"><input type="text" placeholder="one" /></div>
</div>

<div class="row">
    <div class="label"><label>label two large</label></div>
    <div class="input"><input type="text" placeholder="two" /></div>
</div>

<div class="row">
    <div class="label"><label>label three very large</label></div>
    <div class="input"><input type="text" placeholder="three" /></div>
</div>

<div class="row">
    <div class="label"><label>label four that is longer than thought</label></div>
    <div class="input"><input type="text" placeholder="four" /></div>
</div>

<div class="row">
    <div class="label"><label>label textarea</label></div>
    <div class="input"><textarea placeholder="Large text area"></textarea></div>
</div>

Or use CSS table layout.

.row {
    display: table;
}
.label, .input {
    display: table-cell;
    vertical-align: middle;
}

Updated Example

body {
    margin: 0;
}
.row {
    display: table;
    padding: 3px 0;
}
.label, .input {
    display: table-cell;
    vertical-align: middle;
}
.label {
    width: 100px;
    padding-right: 10px;
    text-align: right;
}
.input {
    height: 25px;
    padding: 2px;
}
<div class="row">
    <div class="label"><label>label one</label></div>
    <div class="input"><input type="text" placeholder="one" /></div>
</div>

<div class="row">
    <div class="label"><label>label two large</label></div>
    <div class="input"><input type="text" placeholder="two" /></div>
</div>

<div class="row">
    <div class="label"><label>label three very large</label></div>
    <div class="input"><input type="text" placeholder="three" /></div>
</div>

<div class="row">
    <div class="label"><label>label four that is longer than thought</label></div>
    <div class="input"><input type="text" placeholder="four" /></div>
</div>

<div class="row">
    <div class="label"><label>label textarea</label></div>
    <div class="input"><textarea placeholder="Large text area"></textarea></div>
</div>

Either way, No need clear floats.

Upvotes: 1

Kup
Kup

Reputation: 884

try, putting the line-height on the label the same as the height on the input

label {
    line-height: 19px;
}

or just add some padding-top on the label,

label {
    padding-top: 3px;
}

Upvotes: 1

Related Questions