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

Question

我想在同一行有两个文本块，其中较大字体的文本垂直居中对齐，较小字体的文本与较大字体的文本基线相同。看看我的 fiddle，其中大文本根据需要居中。较小的文本虽然也居中，但我希望它稍微低一点，这样感觉两个文本块在同一个 "line" 上。 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/

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

How to center large font text and let small font text align bottom

html

css

font-size

vertical-alignment