如何将文本垂直对齐到底部并根据需要填充其上方的空白区域？

Question

我的设计师提出了以下设计方法：

然而，我并不完全确定如何让文字粘在底部，就像你在中间看到的一样。我以为我可以做类似的事情（例如内联css）：

<div style="vertical-align: bottom; height:30px;">
  <h2 style="line-height: 15px;font-size: 15px;padding: 0; margin:0;">
    Foo bar foo
  </h2>
</div>

建议？

Answer 1

假设您为每个“按钮”使用两个div，如果将外部div（黑色位）设置为position：absolute或position：relative，则可以在包含文本的内部div上使用bottom：0。 这将具有将文本div对齐其父级底部的效果。 注意：您不能使用vertical-align属性，因为只有在您查看表格单元格时才能使用它。