Scenario is like this – there is a div and an element inside that div, let us say a span or a link element. This element needs to be middle aligned vertically inside the div.
Apparently there are several way to do this. I am showing you the easiest method.
Add class h-100 to the parent div.
<div class="row py-4 h-100"> <!-- This is the parent div --> <div class="col-md-12"> <a class="" href="" rel="home"></a> </div> </div>
This will make the parent div full height within whatever container you put it inside of.
Next add class my-auto to the div where the element is located.
<div class="row py-4 h-100"> <!-- This is the parent div --> <div class="col-md-12 my-auto"> <!- this is the div where the element "span" is located --> <span class="">Home</span> </div> </div>
my-auto is a bootstrap class that stands for auto margin along the y-axis (vertical axis).
This class is equivalent to
margin-top: auto; margin-bottom: auto;
Save and test. The span element should now be vertically centered.
Copyright Web/ Design/ Vista 2022 ©