如何让单个字符在所有浏览器和操作系统中居中相同？答案

【问题标题】：How can I get a single character to center identically in all browsers and operating systems?如何让单个字符在所有浏览器和操作系统中居中相同？
【发布时间】：2011-01-09 09:02:30
【问题描述】：

我正在使用 CSS3 边框半径在这个网站上创建圆形按钮：

http://hexpreview.com/

但是，由于 Mac 和 Windows 之间（不是浏览器之间）的字体渲染差异，按钮的文本在其边界圆内的居中是不一致的。按钮在 Windows 中的所有支持 CSS3 的浏览器中都能正确呈现，但在 OS X 或 Linux 中则不然。

这里有一些更简单的代码，在某种程度上重现了这个问题：

<html>
<head>
<title>Rounded Buttons Example</title>
<style type='text/css'>
    div {padding:1em; margin:1em}
    a {text-decoration:none; color:#000;}
    #help_link, #add_link {
        display:block;
        height: 1.4em;
        width: 1.4em;
        text-align:center;
        line-height: 1.4;
        font-size:1.5em;
        padding:0;
        border:.1em solid #000;
        -moz-border-radius:.8em;
        -webkit-border-radius:.8em;
        border-radius:.8em;
    }

    #help_link:hover, #add_link:hover {
        border-width:.15em;
        margin:-.05em;
        -moz-border-radius:.85em;
        -webkit-border-radius:.85em;
        border-radius:.85em;
    }

</style>
</head>
<body>
<div>
    <a id='help_link' href='#'>?</a>
</div>
<div>
    <a id='add_link' href='#'>+</a>
</div>
</body>
</html>

我已经为此苦苦挣扎了一段时间，并且开始变得一团糟。如果这是与 CSS3 规范相关的问题，我可能会放手，但在我看来，这是一个跨浏览器字体问题（居中在方形按钮中也不起作用）。有什么想法吗？

编辑

我想澄清一下，我希望按钮位于圆形边框的正中心。主要问题是垂直居中，因为 OS X 和 Windows 中的字体高度不同，即使指定了 line-height 和 font-size 也是如此。我对涉及在按钮内手动定位字符的解决方案感到满意，但我已经尝试过，手动居中在一个操作系统上会对其他操作系统产生不利影响。

【问题讨论】：

一个音符，位置：固定； IE6 不支持。不过我不会关注这一点，因为使用您网站的人肯定会使用 Firefox 或 Safari（网络开发人员和图形艺术家）。

标签： fonts cross-platform cross-browser css

【解决方案1】：

嗯，

div {text-align: center;}

我必须在这里遗漏一些东西......

或者，您可以将<a> 标签包装在<p> 标签中，并在<p> 标签上设置text-align: center。

编辑

在进一步查看您的页面后，您似乎正在尝试将绝对定位的内容居中。这是困难的。确保您没有将 <a> 标记声明为 display:block 并且可以将其居中，因为 <a> 标记默认是内联的。

编辑 2

在进一步审查后，您需要做的就是将您的 #help 规则设置为 left: 50% 并摆脱您的 right 规则。即使在绝对定位的情况下，它也会很好地居中:)

【讨论】：

我认为你在正确的轨道上。将文本置于div 的中心，而不是a 标记，就像他现在那样。
我试试这个，但不影响垂直定位。我可以手动设置边距以使事物看起来居中，但我还没有找到一种在 Windows、OS X 和 Linux 上显示相同的方法。编辑——将 text-align:center 应用于包含的 div 没有任何效果。
您希望项目如何垂直放置？你提到的只是居中......
垂直和水平居中。如果您在 Windows 中查看该站点，您就会明白我的意思。在 Mac 上，Firefox 中的问号太高，Chrome 中的 + 太低。
ps 我在 PC 上，所以我无法重现你的 mac 问题。也许您不应该将 90% 的时间花在担心不到 8% 的用户看到的内容上 :)

【解决方案2】：

我发现了问题。原始页面中的字体被声明为“Helvetica, sans-serif”。 Windows 没有 Helvetica，所以它在 Arial 中呈现。所有 Mac 浏览器都在 Helvetica 中渲染，因此存在渲染问题。更改为“Arial, sans-serif”可以解决问题。

【讨论】：