Html 在不同级别上对齐不同大小的文本

我试图在不同的层次上对齐不同大小的文本。请参见下图以查看我想要的内容：

这是我正在尝试的代码，但它似乎不起作用

div{
背景：#1FA3A2；
填充：50px；
颜色：#fff；
字体系列：无衬线；
}

$
199
/月

您可以使用positions和top css属性来解决代码中的矿工对齐问题。请参阅更新的代码。建议单独编写样式（而不是内联样式）。给定的样式（

top:'value'；

）以下代码可能会根据您计划给出的总体样式进行更改（与问题图片相同）

$
199
/月
.dlr{
垂直对齐：文本顶部；
字体大小：14px；
位置：相对位置；
顶部：6px；}
伯德先生{
字体大小：14px；
垂直对齐：底部对齐；
位置：相对位置；
顶部：-4px；}

以下是您的尝试：

.a{font-size:12px; vertical-align:text-top; }
.b{font-size:30px; vertical-align:middle}
.c{font-size:12px; vertical-align:sub;}

与：

$
199
/月

---

HI现在用于此

后
或
前
css属性，如下所示


div>span{
位置：相对位置；
显示：内联块；
垂直对齐：顶部；颜色：#fff；
}
div>span:之后{
位置：绝对位置；
内容：“$”；
字体大小：14px；
顶部：4px；
左-6px；
}
div>span:之前{
位置：绝对位置；
内容：“/月”；
字体大小：14px；
底部：3px；
右：-38px；
}
div{背景：蓝色；填充：20px 0；文本对齐：居中；}

199
您还可以指定跨距的线高度，从而影响垂直对齐


div{
背景：#1FA3A2；
填充：50px；
颜色：#fff；
字体系列：无衬线；
}

$
199
/月
这与这三条线的高度不同有关。我可以修改你的代码，使之符合你的要求


span{
线高：32px；
}

$
199
/月
您的代码正确对齐了，您有什么问题吗？在他的图像中，
$
的顶端不会高于
799
的顶部。而且
/mo
不会低于
799
的底部。如果你渲染他的代码，你会看到
$
比
799
的顶部高，
/month
比
799
的底部低。没问题，乐意帮忙：）
.a{font-size:12px; vertical-align:text-top; }
.b{font-size:30px; vertical-align:middle}
.c{font-size:12px; vertical-align:sub;}

<div>
    <span class="a">$</span>
    <span class="b">199</span>
    <span class="c">/month</span>
</div>