html - 如何将大字体文本居中并让小字体文本对齐底部

Question

我想在同一行上有两个文本 block ，其中较大字体的文本垂直居中对齐，较小字体的文本与较大字体的文本基线相同。看看我的 fiddle ，其中大文本根据需要居中。较小的文本虽然也居中，但我希望它稍微低一点，这样感觉两个文本 block 在同一“行”上。 https://jsfiddle.net/phzzhevq/2/

HTML:

<div class="my-table">  
    <div class="my-cell">
        <span class="large-text">Large text</span>
    </div> 
    <div class="my-cell">
        <span class="small-text">Small text</span>
    </div>
</div>

CSS:

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

解释所需结果的图像:

Answer 1

尝试这个小修复。如果这是您想要的，请告诉我。

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