在我的程序中,我有一些内联的链接,位于页面顶部。
[链接A,链接B,链接C,等... ]
文本是可变的,因此每次更改时,脚本都会检查宽度以确保它不会溢出菜单区域,如果是,则会调整字体大小和填充。字体大小也可以手动调整。
一切正常,但我意识到随着字体大小的变化,文字不再垂直居中。链接菜单高60像素,标签显示为块,带有填充,使文本显示在块的中间。
我试图弄清楚计算链接顶部和底部填充的数学,无论字体和大小是什么,都要将它们居中。
我得到的最接近的是菜单的高度X = 60,文本的高度(我使用的字体大小似乎比我在跨度中放置文本时更准确并测量计算的高度(例如,20px),然后我从菜单高度减去文本高度,留下40px用于填充,我将其分成两半,并在20px字体大小文本的顶部和底部有20px。这看起来很完美,而且它完美无缺。
另一个例子是16px和22px填充顶部和底部,它运行良好,并且似乎在菜单中居中。
font-size:16px padding-top / padding-bottom:22px http://gyazo.com/7450c7db2887d731549c0edae5cb5c2b
现在出现问题:
当字体大小变大时,例如:32px字体大小,填充顶部和底部14.看起来文本的顶部开始于与较小文本相同的Y位置,使其看起来更符合底部。
font-size:32px padding-top / padding-bottom:14px(32 + 14 + 14 = 60) http://gyazo.com/513698b87fdc45498aea1bf6694ecefc
font-size:25px padding-top / padding-bottom:17.5px (不允许超过两个链接) (这个链接是不被允许的,但是它开始在字体大小25周围显示很多,它更倾向于底部。
要记住的另一件事是橙色背景只有50px高,还有10px高于它,这是鼠标显示的空间。
有没有人有任何想法如何更准确地计算填充以显示它垂直居中?我已经在这里工作了好几个小时,没有在哪里,我哪里出错......?我非常感谢所有阅读/评论的人。