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

【问题标题】：How to center large font text and let small font text align bottom如何使大字体文本居中并让小字体文本底部对齐
【发布时间】：2017-09-09 12:33:10
【问题描述】：

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

解释所需结果的图片：

【问题讨论】：

标签： html css vertical-alignment font-size

【解决方案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;
}

【讨论】：

有效！只剩下一个小问题了。 “我的表”变得大于 80 像素。有没有可能让它正好有 80px 的高度
在 .my-table 中不要使用display: table，而是使用display:inline-block。并在 .my-cell 中使用display:inline-block。
无法使用 inline-block 使其垂直对齐。见小提琴：jsfiddle.net/phzzhevq/6
嗨，迈克，在这种情况下，垂直对齐是什么意思？你能说得更具体一点吗？
我的意思是文字下方和上方的“填充”应该相同。比较 jsfiddle.net/phzzhevq/6 和 jsfiddle.net/phzzhevq/7。前者（带有内联块）在文本上方的填充比不希望的下方多。

【解决方案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>

希望对你有帮助。

【讨论】：

【解决方案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/

【讨论】：

浏览器支持无法使用