将按钮对准容器的底部中央

Question

我有两个div列，每列内有一个按钮。 我希望每个按钮与每列的中心底部对齐。 到目前为止，我可以将它放在中间或底部，但不能同时使用。

 .rr_centerbottom1 { display: block; margin-left: 5%; margin-right: 5%; position: absolute; bottom: 5px; } .header { position: relative; min-height: 180px; } 

 <div class="pure-g header"> <div class="pure-u-12-24"> <!-- colomn 1 --> <a href="test.html" class="pure-button rr_centerbottom1" type='button'> Info</a> </div> <div class="pure-u-12-24"> <!-- colomn 1 --> <a href="test2.html" class="pure-button rr_centerbottom1" type='button'>Boek nu</a> </div> </div> 

Answer 1

我建议使用flexbox：

 .header { min-height: 180px; display: flex; } .header > div { border: 1px solid; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; } 

 <div class="pure-g header"> <div class="pure-u-12-24"> <!-- colomn 1 --> <a href="test.html" class="pure-button rr_centerbottom1" type='button'> Info</a> </div> <div class="pure-u-12-24"> <!-- colomn 1 --> <a href="test2.html" class="pure-button rr_centerbottom1" type='button'>Boek nu</a> </div> </div> 

的jsfiddle

Answer 2

您是否正在寻找这样的东西？

 .rr_centerbottom1 { position: absolute; bottom: 0px; width: 100%; text-align: center; font-weight: 900; } .pure-button { text-decoration: none; } .pure-u-12-24 { display: inline-block; border: 1px solid red; width: 200px; position: relative; min-height: 180px; } 

 <div class="pure-g header"> <div class="pure-u-12-24"> <!-- colomn 1 --> <p class="rr_centerbottom1"><a href="test.html" class="pure-button" type='button'> Info</a> <p> </div> <div class="pure-u-12-24"> <!-- colomn 1 --> <p class="rr_centerbottom1"><a href="test2.html" class="pure-button" type='button'>Boek nu</a></p> </div> </div> 

Answer 3

如果我对您的理解正确，则希望将链接放在每一列的底部，但将其置于每一列的中心。

由于我看到您已经在使用position：absolute和某种GRID系统，它可能尚未使用flexbox，您可以尝试以下方法：

.rr_centerbottom1 {
  display: block;
    margin-left: 5%;
    margin-right: 5%; 
    position: absolute;
    bottom: 5px;
    left: 0; right: 0;
    text-align: center;
    bordeR: 1px solid blue;
}
.header {
  position: relative;
  min-height: 180px;
}
.pure-u-12-24 {width: 200px; height: 100px; float: left;overflow: hidden;position: relative; bordeR: 1px solid red;}

基本上，您为链接提供了一个left和right属性，将其选中为完整宽度，然后为它提供一个文本对齐中心。 如果按钮的样式为按钮div，则可以使其成为displaY：内联块并将其嵌套在左为0且右为0的另一个div中。顺便说一句，您也可以使用宽度100％。

这是一个jsfiddle，我添加了边框以使其清楚： https ://jsfiddle.net/aLut9pg9/3/