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

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

你可以按照下面的方式实现它。

​

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

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

​

希望能帮上忙。

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/