Question

我需要我的表单让标签和输入框垂直居中对齐。我需要处理标签转到多行的情况（因为固定宽度）和textarea导致标签顶部对齐的情况。

实现这一目标的最佳方式是什么？

<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; }

Answer 1

您可以使用内联块而不是浮动。

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

Updated Example

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

或使用CSS表格布局。

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

的 Updated Example

＆＃13;
＆＃13;
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; }
＆＃13;
<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>
＆＃13;
＆＃13;
＆＃13;

无论哪种方式，都不需要明确的花车。

Answer 2

尝试将标签上的行高与输入

上的高度相同

label {
    line-height: 19px;
}

或者只是在标签上添加一些填充顶部，

label {
    padding-top: 3px;
}

保持标签在表格中垂直对齐的最佳方法？

2 个答案: