问题
I have a full-page bootstrap layout, and on the first page I need something aligned to middle & bottom. There is a background image (first div), and a darker layer on it (second div).
<div class="h-100 w-100">
<div class="h-100 w-100 text-center">
<div class="h-100 w-100 d-flex align-items-center">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
<h1 style="color:#000;">something</h1>
<a href="">
www.something.com
</a>
<p class="tto_cl">
<span style="font-size: 1.8rem;">123</span>
</p>
<span style="text-transform:uppercase; color:#000; letter-spacing: 4px; font-family: Arial;">456</span><br>
</div>
</div>
</div>
Jsfiddle: https://jsfiddle.net/543r2dcs/2/
They are aligned center perfectly, but I need something to bottom.
I want the 456 to the bottom of the div, but this new flexbox system is unusual to me.
回答1:
If you want it to be vertically centered, use my-auto margin y auto, which brings it to the center
回答2:
Bootstrap has a very handy .align-bottom class. You can read about it here
<span class="align-bottom">bottom</span>
回答3:
Set the parent element position: relative then set the poisition for the element you want to be down the bottom to position: absolute then set its bottom to 0 bottom: 0 this will position it to the bottom of its parent container this might also break how you are centering the element so you will have to add left: 0 and right: 0
来源：https://stackoverflow.com/questions/48391500/bootstrap-4-align-bottom