Bootstrap：表单组中的垂直居中标签

Question

我在水平表单中有一个表单组。在此表单组中，右侧元素高于左侧元素。出于这个原因，我想将左侧元素垂直居中于其行中。例如：

<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目前显示在自己行的顶部，如this plunker snippet所示。

编辑：所以为了澄清我的意图，这是现在的状态：

这就是我想要的（蓝色区域是前面提到的＆＃34;行＆＃34;）：

Answer 1

您可以使用CSS将行高设置为等于高度。 另外，不要重复域ID，你只能使用id =＆＃34; inputEmail3＆＃34;一旦。我更改了两个ID以适合文本。

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 2

如果你只想让label1像你的图片一样下拉，你不能只添加一个类给它一些填充顶部吗？就像在这个jsfiddle

中一样

不清楚你是想要全部掉落还是只是标签1。

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

你可以这样做：

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

Answer 4

如果在小型设备上查看，您还需要控制此项，因为标签将位于输入的顶部。

我已经为你添加了一些更多的引导程序。

请参阅此 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>