对齐div底部的文本

Question

我需要将div中的一些文本与div的底部对齐。如何设置div底部和文本之间的空间（例如10或20px）？

以下是示例代码：

.modultext {
    height: 50px;
    width: 300px;
    background: red;
	padding-top: auto;
	padding-bottom: 17px; <!-- Space from the bottom -->
}

<div class="modultext">Sample text</div>

Answer 1

您可以将table-cell布局与vertical-align属性一起使用：

.modultext{
  display:table-cell;
  vertical-align: bottom;
  height: 50px;
  width: 300px;
  background: red;
  padding-bottom: 17px; <!-- Space from the bottom -->
}

<div class="modultext">Sample text</div>

Answer 2

1日：使用line-height

line-height: 5cm;

JSFiddle

第2名：使用absolute

.modultext span {
    position: absolute;
    bottom: 10px;
    left: 10px;
}

<强> JSFiddle

3日：使用Padding

.modultext span {
    padding-top: 70px;
    display: block;
    padding-left: 10px;
}

<强> JSFiddle

Answer 3

一种方法是使用line-height作为div高度的两倍。这将始终将文本设置为div的底部。

.modultext {
  height: 50px;
  line-height: 100px;
  width: 300px;
  background: red;
  padding-top: auto;
  padding-bottom: 17px;
  <!-- Space from the bottom -->
}

<div class="modultext">Sample text</div>

Answer 4

您必须添加一个范围来覆盖文本。

jsFiddle

这就是我评论updated fiddle

的内容

风格：

jdbc:mysql://localhost:3306/staging

<强> HTML：

.modultext{
  height: 50px;
  width: 300px;
  background: red;
  overflow: hidden;
  position: relative;
}
span{
  position: absolute;
  bottom: 0px;
  padding-bottom: 17px;
}