Html 使用不同字体大小的右浮动跨距的中间对齐表格单元格内容

我在使用不同于表格单元格本身的字体大小“中间”垂直对齐跨距时遇到问题

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

|                                                           |
|计量单位（字号：100%）单位（字号：70%）|
|                                                           |

因此，我的标记如下所示：

性能千瓦

单元

跨度在单元格中使用

浮点：右

右对齐，整个单元格使用

垂直对齐：中间

设置样式。

单元

类使用较小的

字体大小：70%

。两者都不起作用。浮动样式似乎将

单位

跨度对齐在

测量

文本开始绘制的顶部

从这个JSFIDLE中的第二个跨距中删除浮动样式可以演示这种效果

那么，有没有一种简单的方法可以在没有更多标记和浮动样式的情况下实现我想要的布局呢？我尝试了相对定位，但我无法垂直居中

装置

跨度

---

谢谢

如果只是元素的相对对齐，则将它们都浮动，并使第二个跨距的

行高

是第一个跨距的

行高

的两倍，因为它具有

字体大小的50%

。比照

---

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

谢谢。这似乎会破坏表的呈现。请看：如果我们使用表，仍然有效。我猜你的小提琴少了些什么。

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

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