为什么字体较大的文本显示得比其他文本低，如何阻止它？

Question

为什么字体较大的文本显示得比其他文本低，如何阻止它？我已经遇到这个问题很长时间了，但我总能找到解决方法，比如降低其他文本。

但是，这次我绝对需要它保持向上。如何使文本在屏幕上显示得更高？

<div style = 'display:flex; justify-content:space-between;'>
        <p style = 'font-size:60px;'>Lorem ipsum</p>
        <p style = 'font-size:30px;'>Lorem ipsum</p>
    </div>

Answer 1

它发生的原因是由于line-height。您可以将其设置为所有字体大小的统一大小，或者您可以使用 flexbox 居中：

div {
     display:flex; 
     justify-content:space-between;
     align-items: center; /* <-- here's your huckleberry -->
}

<div>
    <p style = 'font-size:60px;'>Lorem ipsum</p>
    <p style = 'font-size:30px;'>Lorem ipsum</p>
</div>

Answer 2

只需将 align-items: baseline; 添加到您的 flex 容器中，即可将两个文本放在同一基线上：

<div style='display:flex; justify-content:space-between;align-items:baseline;'>
  <p style='font-size:60px;'>Lorem ipsum</p>
  <p style='font-size:30px;'>Lorem ipsum</p>
</div>

为什么字体较大的文本显示得比其他文本低，如何阻止它？

Why does text with a larger font-size show up lower than other text and how to stop it?

html

css

flexbox

microsoft-edge

font-size