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

Question

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

我要实现的是这样的布局:

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

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

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

unit使用 float:right 在单元格中右对齐 span整个单元格的样式为 vertical-align:middle . unit类使用较小的 font-size:70% .两者一起不起作用。 float 样式似乎与 unit 对齐跨度在 Measurment 的顶部文本开始绘制。

http://jsfiddle.net/Lszdx2hd/

从这个 jsfiddle 中的第二个跨度中删除 float 样式演示了效果。

那么，有没有一种简单的方法可以实现我想要的布局，而无需更多标记和 float 样式？我尝试了相对定位，但我无法将 unit 垂直居中似乎跨越。

谢谢!

Answer 1

如果只是关于元素的相对对齐，将它们都 float 并使第二个跨度的 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;
}

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