Bootstrap 4垂直居中文本位于水平表单行内

Question

在 Bootstrap 4 Horizo​​ntal 表单中，带有文本的 div 如何垂直居中？

以下是取自https://getbootstrap.com/docs/4.3/components/forms/#horizo ​​ntal-form 的示例 ，但不是使用表单输入，而是使用纯文本 div，例如“密码在此处”文本：

<form>
  <div class="form-group row">
    <label for="inputEmail3" class="col-sm-2 col-form-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
    </div>
  </div>
  <div class="form-group row">
    <label for="inputPassword3" class="col-sm-2 col-form-label">Password</label>
    <div class="col-sm-10 align-middle">
      Password goes here
    </div>
  </div> 
</form>

我尝试了align-middle、d-inline-block 类，但没有效果。

Answer 1

用于align-self-center垂直对齐

<form>
  <div class="form-group row">
    <label for="inputEmail3" class="col-sm-2 col-form-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
    </div>
  </div>
  <div class="form-group row">
    <label for="inputPassword3" class="col-sm-2 col-form-label">Password</label>
    <div class="col-sm-10 align-self-center ">
     Password goes here
    </div>
  </div> 
</form>

参考： https: //getbootstrap.com/docs/4.3/utilities/flex/#align-self

演示：

<form>
  <div class="form-group row">
    <label for="inputEmail3" class="col-sm-2 col-form-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
    </div>
  </div>
  <div class="form-group row">
    <label for="inputPassword3" class="col-sm-2 col-form-label">Password</label>
    <div class="col-sm-10 align-self-center ">
     Password goes here
    </div>
  </div> 
</form>