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

您的HTML标记非常混乱，但请尝试将其添加到您的CSS中：

.dispInlineLabel {
    line-height: 40px;
    margin: 0.5em 0;
}

label.ui-input-text {
    line-height: inherit;
}

http://jsfiddle.net/7vPqw/8/

Answer 2

由于您尚未在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%;
    }
}

垂直居中标签和输入字段

2 个答案: