如何垂直對齊標誌符號？

我需要該字形與文本垂直對齊。現在看起來更像是附在底部。如何垂直對齊標誌符號？

這裏作爲一個例子

<a href="#">Zoom</a> 

a { 
    font-family: 'Open Sans', sans-serif; 
    font-weight: 600; 
    font-size: 32px; 
    color: #333; 
    text-decoration: none; 
    text-transform: uppercase; 
} 

a:before { content:"\2039"; }

和jsFiddle

來源

2014-11-23 Aley

這是最簡單的只是垂直對齊和固定偏移做。例如

a:before { content:"\2039"; vertical-align:0.1em; }

見http://jsfiddle.net/csh0da6o/3/

來源

2014-11-23 18:47:07 Alohci

的偏移量需要依賴於所涉及的字符和所使用的字體，因爲這實際上是關於對齊* glyphs *，並且您不能引用CSS中的glyph度量，但是使用'em'單位避免了附加依賴性，依賴性對於字體大小。這裏'0.1em'確實是一個合適的值的具體情況。 – 2014-11-23 18:51:22

偉大的，這是一個解決方案。謝謝！ – Aley 2014-11-24 09:59:36

您可以在字形適用vertical-align: top將文本與vertical align: middle實現這一行爲。通過調整字形的line-height，您可以更改其偏移量。

這裏的對齊到中間的字形一個的jsfiddle：http://jsfiddle.net/zephod/csh0da6o/2/

來源

2014-11-23 17:43:02

不工作:(字形停留在底部。應該垂直居中的文本。 – Aley 2014-11-23 18:37:25

作品在Chrome中。不會在FF或IE瀏覽器。 – Alohci 2014-11-23 18:38:02

如何垂直對齊標誌符號？

回答

相關問題