水平表单行内的Bootstrap 4垂直中心文本[重复]

Posted 2023-03-06

【中文标题】水平表单行内的Bootstrap 4垂直中心文本[重复]

【英文标题】：Bootstrap 4 vertical center text inside horizontal form row [duplicate]

【发布时间】：2020-02-09 17:00:20

【问题描述】：

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

这是取自https://getbootstrap.com/docs/4.3/components/forms/#horizontal-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 类，但没有效果。

【参考方案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

演示：

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

【参考方案2】：

如果您尝试使用 CSS 规则垂直居中对齐 div 内的文本，vertical-align: middle;你不会成功的。假设您有一个高度为 50px 的 div 元素，并且您在 div 内放置了一些要垂直居中对齐的链接。最简单的方法是——只需应用 line-height 属性，其值等于 div 的高度，即 50px。

.menu
   height: 20px;
   line-height: 20px;
    

【讨论】：

这个问题是 Bootstrap 特有的，你的答案是广泛的 CSS。