Bootstrap 4 vertical center text inside horizontal form row [duplicate] - css

Question

This question already has answers here:
Flexbox: center horizontally and vertically
(14 answers)
Vertical Align Center in Bootstrap 4 [duplicate]
(20 answers)
Closed 3 years ago.
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;
}