如何将单个Unicode字符垂直居中在容器中？

Question

当我制作网页时，如果图片或SVG不是必要的，我喜欢使用Unicode字符来代替图标。这对我来说很容易，并且可以使页面更轻便。通常情况下，这种方法效果还不错，但问题在于我总是需要调整偏移量以正确居中。

是的，我知道这个：

.someDiv {
   width: 10px;
   height: 10px;
   line-height: 10px;
   text-align: center;
}

但问题在于，大多数字形本身并没有垂直居中。这意味着，例如，我会在一个正方形容器中得到这个垂直偏离中心的●:

是否有CSS的方法可以使字形垂直居中，而不是字体的平均线？（或者技术上被居中的任何东西。）

- btd

---

相关链接：https://dev59.com/C1MH5IYBdhLWcg3woQcs - Temani Afif

Answer 1

我通过放弃CSS并更加开放地思考，成功地实现了一些工作——

首先，我下载了一个Noto字体，其中包含我想要的符号，因为Noto字体的许可证非常宽松。 https://www.google.com/get/noto/ 然后，我安装了fontforge http://fontforge.github.io/ 我将这个Python脚本添加到我的%appdata%/Roaming/fontforge/python/目录中（因为我在Windows上）https://github.com/gumblex/stamico/blob/master/centerglyph.py 我用fontforge打开了Noto TTF。使用选择所有选项，然后使用脚本添加的Tools > Metrics > Center in Glyph选项，再使用Tools > Metrics > Y Offset进行一些调整，我能够垂直居中字体中的所有字符。（在我的情况下，由于某种原因，选择Glyph居中/高度居中选项会导致字符位置高于中心线，因此我不得不进一步调整它们。）

我在CSS中添加了@font-face并指定了我想要垂直居中的字符的字体样式。

@font-face {
    font-family: "symbol-font";
    src: url(ux/NotoSansSymbols2-Aligned.ttf);
}

- btd

---

这只是我想要垂直居中的许多字形中的一个示例。对于单选按钮，我可能最终会选择其他方法！我选择这个作为我的工作示例，因为很容易看出它是否居中。老实说，所有这些所需的时间比手动计算它们的垂直偏移量要少得多。 - btd

Answer 2

从我的角度看，您正在经历的问题无法得到令人满意的解决。问题在于：a）您使用的字符具有字距、行高等特性，甚至不能可靠地垂直居中处理每个字符，因为b）每个操作系统和浏览器都可能有自己的该字符表示，您无法控制。

尽管如此，我仍然喜欢这种方法，因为它非常轻量级，并且我曾在过去使用它，例如在我的扫雷游戏https://connexo.de/defuse中。

您在那里看到的所有图标都是UTF-8表情符号/字符。

- connexo