How to align your superscript with body 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 89 cents to line up with 10 dollars with a superscript. When using <sup> , a superscript is used, but the "89" part goes further than we would like. If you look at the image, the upper part 89 should be aligned with the upper part 10.

Answer 1

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

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

Answer 2

Give vertical-align: top; <sup>