时间戳

首页 > 解决方案 > 水平表单行内的 Bootstrap 4 垂直居中文本

css - 水平表单行内的 Bootstrap 4 垂直居中文本

问题描述

在 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 类，但没有效果。

标签： cssbootstrap-4

解决方案

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

演示：

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">


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

推荐阅读