Question

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

我试图集中于： 1.线高 2.转换 3.弹性 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

如何使字体全高

2 个答案: