文字到底部

Question

有没有办法让div的内容文本到底？我在这里准备了一个例子.

http://jsfiddle.net/JGuP7/

这是样本层次结构:

<div class="button">Button Label</div>

我试图在不添加额外跨度或更改层次结构的情况下实现结果.

Answer 1

三种可能的解决方案,尽管每种解决方

jsFiddle演示

第一个解决方案依赖于line-height: 220px; vertical-align: bottom;将文本与文本的底部对齐DIV.第二个解决方案创建一个:beforepsuedo元素,将文本推送到底部DIV(这不需要额外的标记).这两种解决方案都将在IE7或更早版本中失败,如果出现以下问

• 字体大小会改变
• 文本换行到第二行
• 包含元素的大小会发生变化

第三个解决方案依赖于display: box;属性,这是一个正在逐步淘汰的CSS属性(有关灵活盒模型的快速命中的详细信息).此解决方案仅自v4支持Chrome,自v2以来支持Firefox,以及IE10 beta.但是,新的Flexbox标准已经标准化,但浏览器支持很少.这种解决方案可能被认为是"太新"而无法有效使用(html5please.com/#flexbox).

一般来说,您应该考虑在文本周围添加一个新的包装元素,以便position: absolute; bottom: 0;将元素放在父元素的底部.这有利于随着字体大小或文本长度的增加向上增长子元素,并且与父容器的维度无关.根据您的定位对布局的关键任务,您可以使用Javascript添加此新元素.考虑到你提出的问题,这可能并不理想,但浏览器支持对于我上面列出的更古怪的CSS解决方案并不算理想:-p

Answer 2

另一种方法是使用"display:table-cell"和"vertical-align:bottom".

http://jsfiddle.net/JGuP7/1/

.button {
    display: table-cell;
    background-color: darkred;
    color: white;
    width: 120px;
    height: 120px;
    text-align: center;
    vertical-align: bottom;
}