Forms 引导：表单组中垂直居中的标签

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

电子邮件1

随机的东西
电子邮件2

Email1

当前显示在其自身行的顶部，如中所示

编辑：为了澄清我的意图，以下是当前状态：

这就是我想要的（蓝色区域是前面提到的“行”）：

---

如果您只想让label1像在图像中一样向下放置，那么您不能添加一个类，给它一些顶部填充吗？像这样

不清楚是要全部放下还是只放在标签1上

CSS

HTML

电子邮件1

随机的东西
电子邮件2

您可以执行以下操作：

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

---

您可以使用CSS将线高度设置为等于高度。 另外，不要重复域id，您只能使用id=“inputEmail3”一次。我更改了两个ID以适应文本

CSS

HTML

电子邮件1

随机的东西
电子邮件2

如果您准备放弃对某些“旧”浏览器的支持，您可以使用flexbox功能（请参阅）

---

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

我已经添加了一些引导程序来为您介绍这一点

请参见此中的内容

<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> 

电子邮件1

随机的东西

随机的东西

随机的东西
电子邮件2

---

那么您希望

标签

显示在

输入

字段的左侧，与屏幕大小有关吗？如果我错了，请纠正我？事实上，这已经发生了。相反，

标签

应该出现在

输入

和文本随机内容之间。我现在正在处理这个问题，但只是一个请求，您能否提供一张图片，至少是您希望出现的内容的大致图纸？谢谢。根据您提供的链接，您所指的左侧元素是

标签

，如果您展开窗口，它将显示在

输入的左侧。如果你问我的话，这部分不是很清楚。我想让左边的元素垂直居中于整行，你到底希望它如何显示？你的问题不清楚。请提供一张图片或重写你的问题，以便我能帮助你。我也很好奇，你到底为什么要这样做？因为在我看来，创建一个
表单并不是一个很好的方法
，这是在看了一堆类似的问题之后，对我来说第一件真正起作用的事情。谢谢你，舍布朗
.form-horizontal .form-group {
    transform-style: preserve-3d;
}
.form-horizontal .vertically-aligned-label {
    position: relative;
    top: 50%;
    transform: translateY(50%);
}

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

<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> 

<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>

<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>