可变高度内容与表格单元格底部之间的垂直中心图标

Question

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

让它与单元格的中心对齐很简单（vertical-align: center，绝对定位等），但要让它在文本下方居中，而不是那么多。想象我的意思：

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

到目前为止我的样本：http://plnkr.co/edit/RIaXLzPtQiqLK9XBcmD0

那些不容易的事情：

• 表格单元格除了其内容之外没有高度，所以我们不能有一对div，一个在另一个之下，底部占据剩余部分。
• 显示图标的单元格旁边的单元格内容的高度无法提前确定，因此我们无法在单元格上设置高度并期望它始终为真
• 实际内容，因此长度＆amp; “TITLE TEXT”的高度现在已经提前知道了。用户输入的内容或翻译可能会导致这种情况突破多行
• 必须（合理地）支持IE9 +

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

Answer 1

使用jQuery和一些数学，这可能适合你：jsFiddle（我比其他网站更习惯于捣乱）。

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>

和CSS：

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;
}

编辑：仅使用Javascript，这是另一种解决方案（相同的原则）：http://plnkr.co/edit/i1m1lulL7OgAe0ykY6eX?p=preview