将文本对齐到列的底部（不使用 table-cell）

Question

我试图将 div/text 对齐到列的底部，但没有成功。如果可以避免，我宁愿不使用 table-cell。

#jBtn {
  position: relative;
  float: right;
  border: 1px solid #fff;
  border-radius: 50%;
  color: #fff;
}

#jTxt { 
 position: absolute;
 bottom: 0;
 width: 100%;
 padding: 25px;
}

<div id="jTxt">
  <div class="col-md-6">
    <h1>Something Something</h1>
    <h2>sub-Title</h2>
  </div>

  <div class="col-md-6">
    <div id="jBtn"><i class="fa fa-arrow-down fa-2x"></i>
    </div>
  </div>
</div>

我正在努力让 #jBtn 留在 bottom。即使 position: absolute 似乎也行不通。

编辑：

我需要 jTxt div 保留在其父级的底部，因此它需要保持位置：绝对

Answer 1

如果您在 jBtn 的父级 <div class="col-md-6"> 上设置 position: relative 并在 jBtn 上设置 position: absolute 它应该可以工作。

这里我添加了一个新的class，po-re，为了不和col-md-6class.

混淆

HTML

<div class="col-md-6 po-re">
    <div id="jBtn"><i class="fa fa-arrow-down fa-2x"></i></div>
</div>

CSS

.po-re {
  position: relative;
}

#jBtn {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 50px;    /* adjust to your values */
  height: 20px;   /* adjust to your values */
  border: 1px solid #fff;
  border-radius: 50%;
  color: #fff;
}

将文本对齐到列的底部（不使用 table-cell）

align text to the bottom of column (without using table-cell)

html

css

css-position