Html 在可变高度内容和表格单元格底部之间垂直居中的图标

我在某个文本下方的单元格中显示一个图标，其确切长度/高度事先未知（基于用户输入或翻译），并希望它垂直居中于文本和单元格底部之间

使其与单元格中心对齐很容易（

垂直对齐：中心

、绝对定位等），但使其与文本下方的中心对齐就不那么容易了。想象一下我的意思：

红线是为了找到细胞的中心，也就是我们可以得到它的地方。蓝线是文本的底部，绿线交叉的地方就是我们想要的地方

到目前为止我所拥有的样本：

让这变得不容易的事情：

• 表格单元格没有高度，除了它的内容，所以我们不能有一对div，一个在另一个下面，底部占据剩余部分
• 显示图标的单元格旁边的单元格内容的高度无法事先确定，因此我们无法在单元格上设置高度并期望它始终为真
• “标题文本”的实际内容，因此长度和高度，现在已经提前知道了。用户输入的内容或翻译可能导致多行中断
• 必须（合理地）支持IE9+

---

鉴于缺乏对图标周围元素大小的了解，有没有办法使图标垂直居中于文本底部和表格单元格底部之间？

使用jQuery和一些数学知识，这可能对您有用：（我比其他网站更习惯于摆弄）

jQuery：

$(document).ready(function(){
   //get total height of cell
   var padding = $('.cell').height();
   //subtract height of title text and top 20px
   padding = padding - $('.titleText').height() - 20;
   //split in half for middle
   padding = padding/2;
   $('.iconContainer').css('padding-top', padding + 'px');
});

以及HTML：

<table>
  <tr>
    <td>
      This is a<br />
      tall cell<br />
      to<br />
      make<br />
      the<br />
      other<br />
      tall
    </td>
    <td class="cell">
      <div class="titleText">Title Text</div>
      <div class="iconContainer"><div class="icon">&nbsp;
      </div></div>
    </td>
  </tr>
</table>

---

编辑：仅使用Javascript，下面是另一个解决方案（相同的原则）：

这就是您试图做的吗？或者这里有一个使用Javascript的解决方案。我下面的答案也有jQuery，可能不需要。

table {
  width: 400px;
}

td {
  width: 50%;
  border: thin solid black;
  position: relative;
}

.titleText {
  position: relative;
  top: 20px;
  width: 100%;
  text-align: center;
  text-transform: uppercase;
  font-size: 20px;
}
.cell
{
    vertical-align: top;
}
.icon {
  background-image: url( 'http://icons.iconarchive.com/icons/tinylab/android-lollipop-apps/32/Skala-icon.png' );
  width: 32px;
  height: 32px;
  margin: auto;
}