Bootstrap: Pionowa środkowa etykieta w grupie formularza

Question

Mam grupę formularzy wewnątrz poziomej postaci. W tej grupie formularzy prawy element jest wyższy niż lewy. Z tego powodu chcę wycentrować lewy element pionowo w jego rzędzie. Na przykład:

<form class="form-horizontal"> 
    <div class="form-group"> 
     <label for="inputEmail3" class="col-sm-2 control-label">Email1</label> 
     <div class="col-sm-10"> <!-- higher element --> 
     <input type="email" class="form-control" id="inputEmail3" placeholder="Email"> 
     <br>Random stuff 
     </div> 
    </div> 
    <div class="form-group"> 
     <label for="inputEmail3" class="col-sm-2 control-label">Email2</label> 
     <div class="col-sm-10"> 
     <input type="email" class="form-control" id="inputEmail3" placeholder="Email"> 
     </div> 
    </div> 
</form> 

Email1 obecnie przedstawione na górze własnej rzędu, jak widać na this plunker snippet.

EDIT: Tak, aby wyjaśnić moje intencje, to jest obecny stan:

I to jest to, co chciałbym mieć (niebieski obszar jest wspomniane wcześniej „rząd”):

Answer 1

Jeśli jesteś gotowy do spadku poparcia dla niektórych "starych" przeglądarek, można użyć funkcji schematu flexbox (patrz caniuse.com flex)

<div class="form-group flex-group"> 
    <label for="inputEmail3" class="col-sm-2 control-label">Email1</label> 
    <div class="col-sm-10"> 
    <input type="email" class="form-control" id="inputEmail3" placeholder="Email"> 
    <br>Random stuff 
    </div> 
</div> 

@media (min-width: 768px) { 
    .flex-group { 
    display: -webkit-flex; 
    display: flex; 
    -webkit-align-items: center; 
      align-items: center; 
    } 
    .form-horizontal .flex-group .control-label { 
    padding-top: 0; 
    } 
} 

http://plnkr.co/edit/BQ6C4LGiL4oe1ZQTQ3Ys

Answer 2

Jeśli chcesz tylko label1 spadać w dół, jak w obrazie, nie można po prostu dodać klasę dając mu trochę padding-top? Podobnie jak w tym przypadku, nie ma znaczenia, czy wszystkie mają być opuszczone, czy tylko etykieta1.

CSS

.label1{padding-top:35px !important} 

HTML

<form class="form-horizontal"> 
<div class="form-group"> 
    <label for="inputEmail3" class="label1 col-sm-2 control-label">Email1</label> 
    <div class="col-sm-10"> <!-- higher element --> 
    <input type="email" class="form-control" id="inputEmail3" placeholder="Email"> 
    <br>Random stuff 
    </div> 
</div> 
<div class="form-group"> 
    <label for="inputEmail3" class="col-sm-2 control-label">Email2</label> 
    <div class="col-sm-10"> 
    <input type="email" class="form-control" id="inputEmail3" placeholder="Email"> 
    </div> 
</div> 
</form> 

Answer 3

Można to zrobić:

.form-horizontal .form-group { 
    transform-style: preserve-3d; 
} 
.form-horizontal .vertically-aligned-label { 
    position: relative; 
    top: 50%; 
    transform: translateY(50%); 
} 

Answer 4

Można po prostu ustawić line-height równą wysokości z wykorzystaniem CSS. Nie powtarzaj też identyfikatorów domen, możesz użyć tylko id = "inputEmail3". Zmieniłem oba identyfikatory, aby pasowały do ​​tekstu.

CSS

label[for="inputEmail3"]{ 
    height: 74px; 
    line-height: 74px; 
} 

HTML

<form class="form-horizontal"> 
    <div class="form-group"> 
     <label for="inputEmail3" class="col-sm-2 control-label">Email1</label> 
     <div class="col-sm-10"> <!-- higher element --> 
     <input type="email" class="form-control" id="inputEmail1" placeholder="Email"> 
     <br>Random stuff 
     </div> 
    </div> 
    <div class="form-group"> 
     <label for="inputEmail3" class="col-sm-2 control-label">Email2</label> 
     <div class="col-sm-10"> 
     <input type="email" class="form-control" id="inputEmail2" placeholder="Email"> 
     </div> 
    </div> 
</form> 

Answer 5

Będziesz także potrzebował kontrolować to, jeśli widzisz na małym urządzeniu, ponieważ etykieta będzie na wierzchu wejścia.

Dodałem więcej bootstrapu, aby to dla ciebie pokryć.

Zobacz w tym Fiddle.

<div class="container block "> 

<div class="col-md-6 col-md-offset-3 col-sm-7 col-sm-offset-2 col-xs-11 col-xs-offset-0">  
<form class="form-horizontal"> 
    <div class="row block bg-info form-group"> 
    <label for="inputEmail3" class="label1 col-sm-2 col-xs-2 control-label">Email1</label> 
     <div class="col-md-8 col-sm-9 col-xs-9 col-xs-push-1"> <!-- higher element --> 
     <input type="email" class="form-control" id="inputEmail3" placeholder="Email"> 
     <br>Random stuff 
     <br>Random stuff 
     <br>Random stuff 
     </div> 
    </div> 
    <div class="row block bg-info form-group"> 
    <label for="inputEmail3" class="label2 col-sm-2 col-xs-2 control-label">Email2</label> 
     <div class="col-md-8 col-sm-9 col-xs-9 col-xs-push-1"> 
     <input type="email" class="form-control" id="inputEmail3" placeholder="Email"> 
     </div> 
     </div> 
</form> 
</div> 
</div>