如何在HTML中将上标与主文本对齐

Question

价格示例：

我想在我的价格中使用上标。如果价格是10美元和89美分，我希望将89美分与10美元的上标对齐。当使用<sup>时，上标应用，但“89”部分进一步超过我想要的。 如果您看一下图片，那么89的顶部必须与10的顶部对齐。

Answer 1

<style>
.cents {
font-size: 70%;
position: relative;
bottom: 0.3em;
}
</style>
$100<span class=cents>89</span>

这比浏览器在<sup>标记或vertical-align属性上更可靠（参见long explanation）。选择bottom值（适用于所选的font-size）并不是一个精确的科学，因为 - 想法是将元素移动与数字高度减少相同的量，但这需要一些实验

Answer 2

将vertical-align: top;提供给您的<sup>代码