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

发布时间：2020-12-18 00:27:40 所属栏目：安全来源：网络整理

导读：我有一个水平形式的表单组.在此表单组中,右侧元素高于左侧元素.出于这个原因,我想将左侧元素垂直居中于其行中.例如： form class="form-horizontal" div class="form-group" label for="inputEmail3" class="col-sm-2 control-label"Email1/label div class=

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

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

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

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

解决方法

如果您准备放弃对某些“旧”浏览器的支持,可以使用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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!