中间对齐具有不同字体大小的右浮动跨度的表格单元格内容

Question

我遇到问题＆＃34;中＆＃34;使用与表格单元格本身不同的字体大小的垂直对齐。

我想要实现的是这种布局：

| | | Measurement (font-size: 100%) unit (font-size: 70%)| | |

所以我的标记看起来像这样：

<td class="value">Performance <span class="unit">kW</span></td>

unit范围在单元格中使用float:right右对齐，整个单元格使用vertical-align:middle设置样式。 unit类使用较小的font-size:70%。两者都不起作用。浮动样式似乎与unit文本开始绘制的顶部的Measurment范围对齐。

http://jsfiddle.net/Lszdx2hd/

从这个jsfiddle的第二个范围中删除浮动样式演示了效果。

那么有没有一种简单的方法来实现我想要的布局而不需要更多的标记和没有浮动样式？我尝试了相对定位但是我不能垂直居中unit范围。

谢谢！

Answer 1

如果它只是元素的相对对齐，则将它们浮动并使第二个跨度的line-height两倍于第一个跨度的line-height，因为它有50％的font-size。比照http://jsfiddle.net/Lszdx2hd/1/

span {
  font-size: 40px;
  line-height: 1;
  float: left;
}

span + span {
  font-size; 50%;
  line-height: 2;
  float: right;
}

这样它将独立于第一个跨度的字体大小和/或高度。