केंद्र लबल्स और इनपुट फ़ील्ड लंबवत

मेरे पास कई इनपुट और लेबल के साथ एक स्क्रीन है ( jsFiddle )। मैं लेबल को लंबवत रूप से नियंत्रित करने के लिए लेबल कैसे केंद्रित कर सकता हूं?

जाहिर है, जब लेबल को नियंत्रण के समान रेखा पर दिखाया जाता है तो उन्हें केवल केंद्रित किया जाना चाहिए।

अब तक, मेरे पास यह है:

एचटीएमएल

<div class="dispInlineLabel" >
    
</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>

सीएसएस

.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%;
    }
}
0
जोड़ा संपादित
विचारों: 1
जोड़ा लेखक Omar, स्रोत

2 उत्तर

Since you have not wrapped your form inputs inside label, i would suggest you to separate their styling....this would solve your problem and provide greater independence for label designing , also, solves your purpose :)

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%;
    }
}
1
जोड़ा

आपका एचटीएमएल मार्कअप वास्तव में गन्दा है, लेकिन इसे अपने सीएसएस में जोड़ने का प्रयास करें:

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

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

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

1
जोड़ा