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将其水平居中，然后使用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>

在div顶部居中对齐文本，在末尾对齐按钮

2 个答案: