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

Question

我在一些文本下方的单元格中显示一个图标，事先不知道其确切长度/高度(基于用户输入或翻译)，并希望它在文本和单元格底部。

让它与单元格中心对齐很容易(vertical-align:center、绝对定位等)，但让它在文本下方居中，就没那么容易了。形象化我的意思:

红线是找到单元格的中心，也就是我们可以得到的地方。蓝线是文本的底部，绿线交叉的地方就是我们想要的地方。

我目前拥有的样本:http://plnkr.co/edit/RIaXLzPtQiqLK9XBcmD0

让事情变得不简单的事情:

• 表格单元格没有高度，除了它的内容，所以我们不能有一对 div，一个在另一个下面，底部占据剩余部分。
• 无法预先确定显示图标的单元格内容的高度，因此我们不能在单元格上设置高度并期望它始终为真
• “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