在 DIV 中上下对齐答案

【问题标题】：Align on top and on bottom in the DIV在 DIV 中上下对齐
【发布时间】：2014-04-16 02:53:29
【问题描述】：

我有 DIV，其中包含一些文本和一个按钮。我需要：

对齐DIV底部的按钮
对齐 DIV 顶部的文本

这是我想要的图像：

我的代码：

HTML：

<div class="table">
    <div class="cell">
        <p>Some text</p>
        <a type="button" class="btn" href="#">Button</a>
    </div>
    <div class="cell">
        <p>The big one text</p>
        <a type="button" class="btn" href="#">Button</a>
    </div>
    <div class="cell">
        <p>Some small text</p>
        <a type="button" class="btn" href="#">Button</a>
    </div>
</div>

CSS：

.table {
    display: table;
}
.cell {
    float: none;
    display: table-cell;
    height: auto;
}
.cell .btn {
    vertical-align: bottom;
}

任何想法如何做到这一点？

【问题讨论】：

嗨.. 你应该看看这里。这可能会对你有所帮助。stackoverflow.com/questions/2743989/vertically-aligning-divs
你的 div 高度是固定的吗？
@RiteshChandora 不，他们不是。
@ba1ar 谢谢我会读的。

标签： html css vertical-alignment css-tables

【解决方案1】：

使用：

.cell .btn {
    position: absolute;
    bottom: 0px;
}

【讨论】：

【解决方案2】：

DEMO

   .cell p{
    vertical-align: top;
    display:inline;
}

.cell .btn {
    display:block;
    vertical-align: bottom;
}

注意：我添加了两个display 属性和vertical-alignment，因为p 总是以换行符开始，所以为了使vertcal-alignment:top 工作，您需要为p 添加display:inline元素

【讨论】：

如果 div 高度是可变长度的，它不会起作用。请参阅 tb 链接jsfiddle.net/epwu7/2

【解决方案3】：

DEMO

试试这个，这是最简单的，只需复制粘贴替换您的代码

【讨论】：

非常感谢，但不幸的是，如果将 px 中的宽度添加到 .table 中，并将 % 中的宽度添加到 .cell 中，它不起作用..

【解决方案4】：

.table {
    display: table;
}
.cell {
    display: table-cell;
    height: auto;
    border:1px solid black;
    padding-bottom:40px;
    position:relative;
}
.cell .btn {
    vertical-align: bottom;
    position:absolute;
    bottom:0px;
}

DEMO

试试这个。根据您的按钮高度调整填充

【讨论】：

@Irina 注意，根据spec，position: relative对table-cell的影响是undefined。因此，绝对定位的元素将相对于它们最近的包含块进行定位，在此示例中，它是 初始包含块（<html>）。检查 Firefox 上的 demo 链接以验证这一点。
@HashemQolami 嗯。谢谢。在整个页面中，如果表格单元格上没有position: relative，它仍然对我有用（但我不确定为什么）。