垂直對齊文本mac和PC

我想垂直居中一個盒子裏面的一些符號。但我不能讓符號在兩個OSX和Windows垂直對齊文本mac和PC

這裏是我做了演示問題 http://dabblet.com/gist/2971548

你會發現，在X在窗口垂直居中一個很簡單的例子，垂直對齊但不在OS X上。如何解決此問題？

來源

2012-06-22 Pierre

你的意思是你無法在盒子中垂直*居中*嗎？ – djangodude

是的，從PC上看符號看起來是垂直對齊的，但是從mac下它的2或3px下面的 – Pierre

結帳dabblet http://dabblet.com/gist/2971548。正在使用圖像唯一的解決方案？ – Pierre

在Mac OS X和Windows中看到的區別是因爲使用了兩種不同的字體，而且這些特定的符號相對於基線處於不同的高度。垂直居中以字體爲中心，而不僅僅是字符串中的字符。

您的CSS字體堆棧指定了「Helvetica Neue，Helvetica，Arial，sans-serif」。在Mac OS X下，Helvetica Neue將被使用。在Windows下，Helvetica Neue不是（通常）存在的，甚至也不是平凡的Helvetica，所以Arial幾乎肯定會被使用。很有可能你會在其他沒有這些字體的平臺上得到不同的結果。

以下鏈接圖形顯示疊加的兩個字體中的符號，並將其設置爲公共基線。 Helvetica Neue紅色; Arial是綠色的。你可以看到很清楚，在Helvetica Neue字體的符號比宋體低了不少：

comparison of plus signs

comparison of multiplcation signs

這裏最好的解決辦法是使用一個@字體面對面的字體，以確保在所有平臺上都使用完全相同的字體。有一些免費和商業服務提供字體數據來做到這一點。我會留給你去搜索並確定你的特定應用程序的最佳選擇。

來源

2012-06-22 18:08:08 djangodude

感謝您的詳細回覆 – Pierre

@Pierre，您用於此解決方案的服務？ –

垂直對齊文本mac和PC

回答

相關問題