コンテナの中央下部にボタンを合わせる

Question

私は2つの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

私はフレキシボックスを使用することをお勧め：

.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

私が正しくあなたを理解していれば、あなたは、各列の一番下にあるリンクを持っているしたいのですが、その各列の中心。

私はあなたが既に位置使って見るので：

.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;} 

は基本的にあなたがリンクに左右性を付与されています。すでに、これはおそらくdoesntの使用フレキシボックスを絶対とGRIDシステムのいくつかの種類を、あなたはこれを試すことができますそれを全幅に伸ばして、それにテキストアライメントセンターを与えます。ボタンがスタイル化されたボタンdivの場合、インラインブロックにして左：0、右：0の別のdivに入れ子にすることができます。また、幅100％を使用することもできます。ここで

はjsfiddleで、私はそれを明確にするために境界線を追加しました：https://jsfiddle.net/aLut9pg9/3/