如何在全高度上制作字体

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 {
    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>

Answer 2

我发现问题，取消对齐是由字体系列引起的，在我的情况下，我使用了Helvetica，在更改了文本对齐后修复了。

https://giphy.com/gifs/SYFl4xIvOdFS6e8X9q/html5