如何居中大字體文本並讓小字體文本居中對齊底部

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

一些其他選項（我用柔性垂直取向）

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/