如何居中大字体文本，让小字体文本对齐底部

Question

我希望在同一行上有两个文本块，其中较大字体的文本在中间垂直对齐，而较小字体的文本与具有较大字体的文本基线具有相同的文本基线。 看看我的小提琴，大文本按照需要居中。虽然较小的文本也是居中的，但我希望它稍微低一些，以便感觉两个文本块在同一“行”上。 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;
}

Answer 2

你可以按照以下方式实现。

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

我希望它有所帮助。

Answer 3

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

line-height: 0.8和font-variant: small-caps

https://jsfiddle.net/Hastig/1en2rsua/1/

或没有small-caps

https://jsfiddle.net/Hastig/1en2rsua/2/

或margin-bottom: -4px

https://jsfiddle.net/Hastig/1en2rsua/3/