如何垂直对齐标志符号？

我需要该字形与文本垂直对齐。现在看起来更像是附在底部。如何垂直对齐标志符号？

这里作为一个例子

<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

如何垂直对齐标志符号？

回答

相关问题