如何将 Unicode 数学符号在其父元素中完全居中？

Question

我正在尝试实现一个涉及单个 Unicode 字符的基于 CSS 的动画：

\n\n

超文本标记语言

\n\n

<div class="spinner">\xe2\x8a\x97</div>\n

\n\n

CSS

\n\n

.spinner {\n    display: inline-block;\n    font-size: 42pt;\n    margin: 50px;\n    animation: spin 0.5s infinite linear;\n}\n\n@keyframes spin {\n    to { transform: rotate(360deg); }\n}\n

\n\n

^{* 在此示例中我省略了供应商特定的前缀。}

\n\n

然而，当我在浏览器（Firefox 20.0）中查看该页面时，角色稍微偏离中心，导致动画“摇摆不定”。

\n\n

您可以在这里看到它：http://jsfiddle.net/bBaVN/77/

\n\n

如何才能让角色完全居中？

\n

Answer 1

您可以将其设置line-height为45pxon .spinner，这将确保包含span元素的高度与宽度相同。这是一个jsFiddle。现在动静少了一些，但依然不像是完全不动的样子。

让它围绕角色中心而不是围绕容器中心旋转的另一种方法span是使用-vendorspecificprefix-transform-origin. 您可以将其设置为围绕另一个点旋转，例如将其设置为：23px 34px将设置要旋转的点的x和y坐标。

我认为它看起来仍然有点移动的事实可能是由于字符没有渲染为完美的圆形，您可以尝试以不同的字体渲染它，更改字体的点大小，甚至text-rendering: optimizelegibility;打开或关闭可能会有所不同。

默认值-vendorspecificprefix-transform-origin是50% 50%，这表明如果您确保元素内的角色完全居中，并且在包含元素上设置动画，它应该精确地围绕中心旋转，然后玩-vendorspecificprefix-transform-origin只会使事情更差。

我的另一个想法是，通过将文本的点大小设置为42pt，包含跨度的宽度变为45px，现在50%是22.5px，如果您将文本的点大小设置得更大一点，或者只是将包含跨度的宽度和高度设置为46px，则将50%为23px，这可能会与当前的移动产生差异。

更新：

我能够通过使用等宽字体，手动设置、和来 使字符居中，然后通过移动强制字符看起来更像圆形，从而使其在Chrome（和 FireFox ）中完美居中通过使用.Courierline-heightheightwidthspan0.5px-webkit-transform: translate()

.spinner {
    display: inline-block;
    font-size: 42pt;
    line-height: 50px;  
    height: 46px;
    width: 46px;
    margin: 50px;
    -webkit-animation: spin 1s infinite linear;
    -moz-animation: spin 1s infinite linear;
    -ms-animation: spin 1s infinite linear;
    -o-animation: spin 1s infinite linear;
    animation: spin 1s infinite linear;
    font-family: courier;
 }

@-webkit-keyframes spin {
    from { -webkit-transform: rotate(0deg) translate(0.5px, 0px)}
    to { -webkit-transform: rotate(360deg) translate(0.5px, 0px)}
}

我认为我需要 2 个 jsFiddle 来演示不同浏览器的事实回答了您是否应该这样做的问题，我认为浏览器之间字体渲染的差异将确保您无法可靠地做到这一点浏览器检测。