Html 如何将大字体文本居中并使小字体文本与底部对齐

我想在同一行上有两个文本块，其中较大字体的文本垂直对齐在中间，较小字体的文本与较大字体的文本具有相同的文本基线。 请看我的小提琴，其中大文本按要求居中。虽然较小的文本也居中，但我希望它稍微低一点，这样就感觉两个文本块在同一条“线上”。

HTML:

解释所需结果的图像：

---

试试这个小补丁。如果这是你想要的，请告诉我

.my-table {
  display: table;
  height: 80px;
  background-color: red;
}

.my-cell {
  display: table-cell;
}

.large-text {
  font-size: 40px;
  line-height:80px;
}

.small-text {
  font-size: 20px;
   line-height:80px;
}

---

你可以用下面的方法来实现它

.my table{
显示：表格；
高度：80px；
背景色：红色；
}
.我的手机{
显示：表格单元格；
}
.大文本{
字体大小：40px；
线高：80px；
}
.小文本{
字体大小：20px；
线高：80px；
}

大文本
小文本

一些其他选项（我使用flex进行垂直对齐）

行高：0.8

和

字体变体：小写

或不带

小大写

或

页边距底部：-4px

---

它可以工作！只剩下一个小问题。“我的桌子”变得大于80px。是否可以使其具有精确的80px高度，而不是在中使用

display:table

。我的表格使用

display:inline block

。并在.my单元格中使用

display:inline block

。无法使用inline block使其垂直对齐。看小提琴：嗨，迈克，在这个上下文中，垂直对齐是什么意思？？你能说得更具体一点吗？我的意思是，正文下面和上面的“填充”应该是一样的。比较jsfiddle.net/phzzhevq/6和。前者（带内联块）在文本上方的填充比下方的填充多，这是不需要的。由于浏览器支持，无法使用此选项

.my-table {
    display: table;
    height: 80px;
    background-color: red;
}

.my-cell {
    display: table-cell;
    vertical-align: middle;
}

.large-text {
    font-size: 40px;
}

.small-text {
    font-size: 20px;
}

.my-table {
  display: table;
  height: 80px;
  background-color: red;
}

.my-cell {
  display: table-cell;
}

.large-text {
  font-size: 40px;
  line-height:80px;
}

.small-text {
  font-size: 20px;
   line-height:80px;
}