在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> 

Answer 2

使用一列flexbox，并使用align-items: center其水平居中align-items: center并使用margin-top: auto将按钮推到底部margin-top: auto -请参见下面的演示：

 .centrar { background-color: rgb(0, 0, 0, 0.5); height: 390px; display: flex; flex-direction: column; /* column direction */ align-items: center; } .centrar button { /* This pushes the button to the bottom*/ margin-top: auto; } 

 <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>