cssにてボタン位置を下揃えしたい

添付のように３カラムの記事をboxで括って表示します。
記事最下部のボタン位置が記事の長さによってバラバラになるのですが、この高さ位置を揃えるにはどうしたらよいでしょうか？

[html]
<div class="cover">
<div class="box1">
<h2>１カラム</h2>
　　　<p>○○○○○○○○○○○○○○○
　　　○○○○○○○○○○
　　　○○○○○○○○
　　　○○○○○○○○○○
　　　○○○○○○○○○○○○○
　　　○○○○○○○○</p>
　　　<p>ボタンＡ</p>
</div>
<div class="box2">
<h2>２カラム</h2>
　　　<p>△△△△△△△△△△△
　　　△△△△△△△△△△△△
　　　△△△△△△△△△
　　　△△△△△△</p>
　　　<p>ボタンＢ</p>
</div>
<div class="box3">
<h2>３カラム</h2>
　　　<p>✕✕✕✕✕✕✕✕✕
　　　✕✕✕✕✕✕✕
　　　✕✕✕✕✕✕✕✕
　　　✕✕✕✕✕✕✕✕✕✕
　　　✕✕</p>
　　　<p>ボタンＣ</p>
</div>
</div>


[css]
div.cover {
display: table;
width: 100%;
}
div.cover div.box1 {
display: table-cell;
width: 33.3%;
}
div.cover div.box2 {
display: table-cell;
width: 33.3%;
}
div.cover div.box3 {
display: table-cell;
}

No.1 ベストアンサー 回答者： t_fumiaki 回答日時： 2016/04/09 12:35

div.cover {　ここに　position:relative;を追加

ボタンはpタグで無くdivで囲い、class属性などで
position: absolute; bottom:0;　を指定

<p>ボタンA</p> ⇒　<div class="katan">ボタンA</div>

・
・
.katan {position: absolute; bottom:0;}

この回答へのお礼

ありがとうございます。

縦位置を揃えることはできました。
が、ボタン位置をセンタリングしたいのですが、
absoluteを使用するとセンタリングできなくなるのでしょうか？

お礼日時：2016/04/09 14:41

No.2 回答者： t_fumiaki 回答日時： 2016/04/09 15:04

>> ボタン位置をセンタリングしたい

１つの例です。

.katan {position: absolute; bottom:0;}
↓
.sita {position: absolute; bottom:0; display:table-cell;
width: 33.3%; text-align:center;}

この回答へのお礼

素晴らし～～！
ありがとうございます！

お礼日時：2016/04/09 15:18