jquery - 垂直居中标签和输入字段

Question

我有一个带有多个输入和标签的屏幕 ( jsFiddle )。 如何使标签相对于控件垂直居中？

显然，只有当标签与控件显示在同一行时，它们才应该居中。

现在，我有这个:

HTML

<div class="dispInlineLabel" >
    <label for="ti_gebdat">Geburtsdatum</label>
</div>
<div class="dispInline">       
    <input name="ti_gebdat" id="ti_gebdat" style="text-align: right" type="date"  data-theme="d">
</div>
<div class="clearFloats"></div>

CSS

.dispInline, .dispInlineLabel{
    display: inline-block;
    border-bottom-width:0;
}
.dispInline{
    float:right;
    width:270px;
    text-align:right;
}
.clearFloats{
    clear:both;
}

@media all and (max-width: 410px){
  .dispInline{
      text-align:left;
      width:100%;
    }
}

Answer 1

由于您没有将表单输入包装在 label 中，我建议您将它们的样式分开....这将解决您的问题并为标签设计提供更大的独立性 ，也解决了你的目的:)

CSS:

   .dispInline
{
    float:right;
    width:270px;
    text-align:right;
}
.dispInlineLabel{
    display: inline-block;
    border-bottom-width:0;
    float:left;
    line-height:4.0em;

}


.clearFloats{
    clear:both;
}

@media all and (max-width: 410px){
  .dispInline{
      text-align:left;
      width:100%;
    }
}