Question

我有一个整页的引导程序布局，在第一页上我需要一些与中间和中间对齐的东西。底部。有一个背景图像（第一个div），上面有一个较暗的图层（第二个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/

它们完全对齐中心，但我需要一些东西才能找到底线。

我希望将456放在div的底部，但是这个新的flexbox系统对我来说并不常见。

Answer 1

如果您希望它垂直居中，请使用my-auto margin y auto，将其带到中心

Answer 2

Bootstrap有一个非常方便的.align-bottom类。你可以阅读它here

<span class="align-bottom">bottom</span>

Answer 3

设置父元素position: relative，然后将要放在底部的元素的poisition设置为position: absolute，然后将其底部设置为0 bottom: 0这会将其置于底部它的父容器也可能会破坏您将元素居中的方式，因此您必须添加left: 0和right: 0

Bootstrap 4对齐底部

3 个答案: