html - 使按钮停留在其列的底部，垂直对齐不起作用

Question

让按钮停留在其列的底部

我正在使用 Bootstrap 3，我有一个包含 2 列的 .row。在两列中都有内容，后面跟着一个按钮。使用 table table-cell 方法，2 列匹配高度，现在我只希望按钮保留在内容较少的行底部。我正在尝试使用垂直对齐来这样做，但它不起作用。 我错过了什么？

jsFiddle: http://jsfiddle.net/CSS_Apprentice/8z3twkb1/

HTML:

<div class="row">

    <div class="col-xs-6">
        <img src="http://placehold.it/50x50" alt="icon" />
        <h5>Header</h5>
        <p>Yet remarkably appearance get him his projection. Diverted endeavor bed peculiar men the not desirous. Acuteness abilities ask can offending furnished fulfilled.</p>
        <button>Donate</button>
    </div>

    <div class="col-xs-6">
        <img src="http://placehold.it/50x50" alt="icon" />
        <h5>Header</h5>
        <p>Yet remarkably appearance get him his projection.</p>
        <button>Donate</button>
    </div>

</div>

CSS:

.row {
    display:table
}
.row > div {
    display: table-cell;
    float: none;
}
.row > div button {
    vertical-align: bottom; 
}

Answer 1

你可以做的是将该按钮设置为绝对位置，如下所示。

.row > div:last-child button {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
}

更新的演示: http://jsfiddle.net/8z3twkb1/2/