0

我正在尝试将一些文本居中在一个 100px x 100px 的圆形框中；

我正在处理的网站在这里： http: //www.blackcountrydesigns.co.uk/the1theme/

我正在使用以下 jQuery 脚本来实现这一点

$(document).ready(function()
{
   $('.header .menu li a').each(function(){
      padding = (100 - $(this).innerHeight())/2
      alert($(this).height());
      $(this).css({'padding-top' : padding+'px' , 'padding-bottom' : padding+'px'})
   });

});

我遇到的问题是，当它们只在一个盒子上时，它认为某些盒子或在 2 线上。

希望你能帮忙！

谢谢

4

3 回答 3

1

发生这种情况的可能性很大，因为在进行计算时使用的字体不是您请求的自定义字体，因为自定义字体在某些浏览器中是异步加载的。

因此，当使用默认字体时，文本分两行，但是当加载自定义字体时，它显示在一行中。如果您删除 google 字体样式表，您将看到字体在第一个和第三个菜单项内以两行显示。这是 chrome 在 DOMready 上检测到的。

这是没有自定义字体的原型的小提琴：http: //jsfiddle.net/z7n7H/

为了解决这个问题，如果您知道没有菜单项应该换行，您可以在锚点上强制使用不间断的空格：

.header .menu li a{ white-space: nowrap }

或者尝试监听字体加载事件（如果存在）并从那里进行计算：https ://developers.google.com/webfonts/docs/webfont_loader

您也可以尝试使用与您正在使用的自定义字体具有相同宽度的默认字体，尽管这很容易破坏。

另一种选择是使用该window.onload事件，因为那时字体应该已经下载并应用了。

于 2012-08-18T20:56:30.520 回答
0

使用图像会很好，因为您的样式在 Firefox 和 IE 中被破坏了，而且如果为什么使用 javascript 为其分配填充.. 如果您应用相同的

底部填充：36px；填充顶部：36px；

这将是统一的 PS 注意填充是用于<a href></a>标签

于 2012-08-18T20:57:07.533 回答
0

在任何浏览器中使用它都会起作用

   $('.header .menu li a').each(function(){
      var a=$('.header .menu li').height(); 
       alert(a);
     var padding = a-65;

      $(this).css({'padding-top' : padding+'px' , 'padding-bottom' : padding+'px'})
   });
于 2012-08-18T21:06:19.597 回答