How to align your superscript to your main text in HTML

Question

Price example:

I would like to use superscript in my price. If the price is $10 and 89 cents I would like to have the 89 cents aligned to the $10 with superscript.When using <sup> the superscript is applied but the "89" part goes further above then I would like. If you take a look at the picture, the top of the 89 would have to be aligned with the top of the 10.

Answer 1

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

This works more reliably across browsers than the <sup> markup or the vertical-align property (see longish explanation). Selecting the bottom value (suitable for the selected font-size) is not an exact science since—the idea is to move the element up the same amount as the height of the digits is reduced, but this requires some experimentation.