Question

让按钮停留在其列的底部

我正在使用Bootstrap 3，我有一个.row，其中包含2列。在两列内部都有内容后跟一个按钮。使用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/

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

1 个答案: