css - 如何使字体全高

Question

我需要居中以在 X 轴和 Y 轴上将一些文本居中。我注意到我的文字不是全高，这是给文字全高的最佳解决方案？

我试图以:1.行高2.变换3. flex 4.表格-表格单元格-垂直对齐

HTML:

<div class="block">
        <p> 3 </p>
      </div>

SCSS:

.block {
    display: table;
    width: 50px;
    height: 50px;
    padding: 0 10px;
    border-radius: 4px;
    box-sizing: border-box;
    font-size: 14px;
    background-color: #ecf3f5;
    border: 1px solid #c9dee4;
    margin-right: 20px;

    p {
      display: table-cell;
      vertical-align: middle;
      text-align: center;
    }
}

What I meant with full height

对于Small font，这个高度真的很重要它不可见但是有 Large font它真的没有居中。

我希望将这段文字居中。

Answer 1

我认为 flex 是让元素在 X 和 Y 上居中的最好和通用的方法，所以添加display: flex;justify-content: center;align-items: center; 给你的父 block 。之后你可以使用任何你想要的字体高度。

.block {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50px;
    height: 50px;
    padding: 0 10px;
    border-radius: 4px;
    box-sizing: border-box;
    font-size: 14px;
    background-color: #ecf3f5;
    border: 1px solid #c9dee4;
    margin-right: 20px;
}
p {
    line-height: 20px;
}

<div class="block">
  <p> 3 </p>
</div>