javascript - 保持标志居中并保持比例

Question

在尝试使用多个版本的 jquery 解决这个问题一小时后，我放弃了。我有一个导航菜单，中间有一个 Logo ，我需要 Logo 始终是一个圆圈。由于布局是响应式的，我根据为其生成的宽度设置 Logo 的高度。问题是，每当我更改视口(viewport)大小时， Logo 都会在高度上移动，我不知道如何维护它。

这是 JSFiddle

Fiddle result here

目前导航菜单中有 5 个按钮，因此每个按钮的宽度为 20%。然后我像这样设置高度并偏移 Logo

function scaleLogo(){

    var ww = $(window).width();
    if (ww < 300) {
      var cr = 0.05;
    }
    else {
      var cr = 0.30;
    }  

    var cw = $('#home_btn').width();
    $('#home_btn').css({
        'height': cw + 'px', 
        'top': '-' + cr * cw + 'px'
    });
}

因此 'height': cw + 'px' 将高度设置为宽度的大小，并且 'top': '-' + cr * cw + 'px' 将 top 属性设置为减去 cr(圆比率)乘以 cw(圆权重)，这导致当屏幕宽度小于 400px 时将其定位为宽度的 -10% 或当屏幕宽度大于 400px 时将其定位为宽度的 -30%。

问题是，只有当我切换到我的手机或全高清台式电脑并缩放到很小的宽度时，这种方法才有效，视口(viewport)变得非常薄和高，使 Logo 根本不居中。

如果您提供有关如何成功地将 Logo 居中(无论视口(viewport)的宽度或高度如何)的任何提示或建议，我将不胜感激。

我试图像 body{min-width:600px} 一样在 body 上强制最小宽度，我假设当我将窗口宽度更改为小于 600px 时它会停止缩放内容，但它什么也没做。如果有人能解释这一点，我也将不胜感激。

一如既往，期待您的回复。谢谢。

Answer 1

这是一个非常简单的解决方案:不要使用从顶部开始的百分比来定位 Logo ，而是使用固定的百分比来定位它，并将您已经计算出的像素大小减半。这在你的 fiddle 中起作用:

 $('#home_btn').css({
    'height': cw + 'px',
    // steadily position it in the middle
    'top': '50%',
    // then reduce its top margin with half its height
    'margin-top' : -(cw/2) + 'px'
 });