Как выровнять верхний индекс к основному тексту в 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 (см. Длинное объяснение ).Выбор значения bottom (подходит для выбранного font-size) не является точной наукой, поскольку идея состоит в том, чтобы переместить элемент на ту же величину, что и высота цифр, но это требует некоторых экспериментов.

Answer 2

Дайте vertical-align: top; вашему тегу <sup>