Bootstrap 4 vertical center text inside horizontal form row

Question

In a Bootstrap 4 Horizontal form, how can a div with text be centered vertically?

Here's an example taken from https://getbootstrap.com/docs/4.3/components/forms/#horizontal-form but instead of a form input have a plain text div, eg "Password goes here" text:

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

I tried classes align-middle, d-inline-block, but no effect.

Answer 1

use align-self-center to align vertically

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

Ref:https://getbootstrap.com/docs/4.3/utilities/flex/#align-self

Demo:

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

Answer 2

If you will try to vertically center align text inside a div using the CSS rule vertical-align: middle; you won't succeed. Suppose you have a div element with the height of 50px and you have placed some link inside the div that you want to align vertically center. The simplest way to do it is — just apply the line-height property with value equal to the height of div which is 50px.

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