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

Posted 2023-03-05

【中文标题】Bootstrap：在表单组中垂直居中标签

【英文标题】：Bootstrap: Vertically center label in form-group

【发布时间】：2015-07-10 05:19:49

【问题描述】：

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

<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 所示。

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

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

【问题讨论】：

那么您希望label 出现在input 字段的左侧，与屏幕大小有关吗？如果我错了，请纠正我？

其实这已经发生了。相反，label 应该出现在 input 和文本 Random stuff 之间。

我现在正在处理这个问题，但只是一个请求，您能否提供一张图片，至少是您想要显示的内容的粗略图？谢谢。

根据您提供的链接，您所指的左侧元素是label，如果您展开窗口，它会出现在input 的左侧。如果你问我，这部分不是很清楚。 我想根据整行垂直居中左侧元素您究竟希望它如何显示？你的问题不清楚。请提供图片或重写您的问题，以便我为您提供帮助。

我也很好奇，你为什么要这样？因为在我看来，创建form

【参考方案1】：

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

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

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

【参考方案2】：

如果您准备放弃对某些“旧”浏览器的支持，您可以使用 flexbox 功能（请参阅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

【讨论】：

在看了一堆类似的问题之后，这是对我真正有用的第一件事。谢谢舍布罗

【参考方案3】：

您可以使用 CSS 将行高设置为等于高度。 另外，不要重复域 ID，您只能使用 id="inputEmail3" 一次。我更改了两个 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> 

【参考方案4】：

你可以这样做：

.form-horizontal .form-group 
    transform-style: preserve-3d;

.form-horizontal .vertically-aligned-label 
    position: relative;
    top: 50%;
    transform: translateY(50%);

【参考方案5】：

如果你只是想让 label1 像你的图片一样下拉，你不能添加一个类给它一些 padding-top 吗？就像在这个jsfiddle

不清楚是要全部下拉还是只需要 label1。

CSS

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