Html 不同字体大小的文本的复杂垂直对齐

我有这个结构，我不能改变它，我只能改变CSS，我没有使用flex的权限

其思想是垂直对齐不同字体大小的文本，并在不同的容器中呈现

.包裹{ 显示：表格； } .货柜a{ 背景色：cecece； 线高：正常； 文字装饰：无； 字体大小：100px； 填充：10px； 显示：表格单元格； 垂直对齐：中间对齐； } .集装箱跨度{ 垂直对齐：中间对齐； } 在…之前{ 内容：1-xyZ； 字体大小：50px； 颜色：红色； 垂直对齐：中间对齐； }

---

只需将伪元素显示为：表格单元格和垂直对齐：中间

.包裹{ 显示：表格； } .货柜a{ 背景色：cecece； 线高：正常； 文字装饰：无； 字体大小：100px； 填充：10px； 显示：表格单元格； 垂直对齐：中间对齐； } 在…之前{ 内容：1-xyZ； 显示：表格单元格； 字体大小：50px； 颜色：红色； 垂直对齐：中间对齐； } 可以使用与字体大小相同的值添加线条高度：

.包裹{ 显示：表格； } .货柜a{ 背景色：cecece； 线高：正常； 文字装饰：无； 字体大小：100px； 线高：100px； 填充：10px； 显示：表格单元格； 垂直对齐：中间对齐； } .集装箱跨度{ 垂直对齐：中间对齐； } 在…之前{ 内容：1-xyZ； 字体大小：50px； 线高：50px； 颜色：红色； 垂直对齐：中间对齐； }

---

最后，事情比我想象的要简单：@Paulie\u你忘记了一些重要的事情。。。请把字号倒过来。问题是他们之间的尺寸可能不同，我猜有些人对所有答案都有疑问：@Temaniaf如果是的话，似乎-嗯…顺便说一句，当你在我这边添加线条高度时，我看不出有什么不同。结果总是和手术一样的snippet@Johannes，这不是一个完美的对齐方式，如果没有更好的对齐方式，我会使用它。。。您尝试使用两种字体大小相同的字体？基本问题是，在任何情况下，文本行的垂直对齐都会指向整行高度的垂直中心。但它并没有定义基线在线高度的哪个垂直位置。此外，字体由不同的字符组成，这些字符具有不同的升序和降序，字体的x高度不同，等等。请参见文本行的垂直中心是什么？从数学上讲，线的中心高度。但从视觉上看，每种字体都会有不同的感觉。所以没有正确的答案…@TylerH我不太同意复制，即使它处理几乎相同的事情。。。但是在这里，我们必须在不同的容器中对齐两个不同的文本，也要对齐不同的字体大小too@TemaniAfif同意。@Temaniaf如果你不粗鲁的话。这个问题在这个网站上已经被问了一百次，有很多经典问题，每个问题都有几十个关于如何做到这一点的答案。请参阅和more@TemaniAfif至于这个问题的一个确切副本，这里有一个只关注大小不同的文本的两个跨度