html - 在 div 的顶部中心对齐文本，在末尾对齐按钮

Question

我有一个像这样的 div 容器:

<div class="text-offer_dos">
       <div class="centrar">
        <h3>Lorem ipsum dolor!</h3>
        <h5></h5>
        <p class="text"><b>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</b></p>
        <button class="btn btn-default btn-deal"  itemprop="potentialAction" data-codigo="sieteporseis">Donec vitae</button>
      </div>
    </div>

我想在 div 的顶部中心设置文本，在末尾设置按钮。

这不起作用 - 这是我测试过的:

.centrar {
    background-color: rgb(0,0,0, 0.5);
    height: 390px;
    display: flex;
    align-items: flex-start;
    justify-content:flex-start;
}

我只需要制作这个感人的 CSS，而不是 HTML。

Answer 1

试试这个

.centrar {
    background-color: rgb(0,0,0, 0.5);
    height: 390px;
    display: flex;
    align-items: flex-start;
    justify-content:flex-start;
    padding-bottom: 50px;
    position: relative;
}
.centrar > button.btn:last-child{
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
}

<div class="text-offer_dos">
       <div class="centrar">
        <h3>Lorem ipsum dolor!</h3>
        <h5></h5>
        <p class="text"><b>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</b></p>
        <button class="btn btn-default btn-deal"  itemprop="potentialAction" data-codigo="sieteporseis">Donec vitae</button>
      </div>
    </div>