CODEWITHSUNDEEP
html
Hristian Kambourov
Hristian Kambourov

Reputation: 93

How to align your superscript to your main text in HTML

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.

superscript

Upvotes: 7

Views: 7658

Answers (2)

Jukka K. Korpela
Jukka K. Korpela

Reputation: 201886

<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.

Upvotes: 9

techfoobar
techfoobar

Reputation: 66693

Give vertical-align: top; to your <sup> tag

Upvotes: 6

Related Questions