0

我有一个特殊的原因将我的标志放在横幅上，我的标志有postion:absolute，但是当我调整浏览器窗口的大小时，我遇到了对齐问题，到目前为止，我想出了一个使用 jQuery 的解决方案，如下所示：

$(document).ready(function(){ 
    alert($(document).height());
    var lopos = $('.banner1').children('img').height()/2;
    $('.logo').children('img').css('top', lopos);
});

横幅图像有max-width:100%，我正在使用 jQueryheight()来获取它的高度并将其除以 2，以便我可以使用它来将我的徽标放在顶部。到目前为止我是成功的，但问题是它发生的时间很短，当我重新调整浏览器的大小时，我看不到值发生了变化。

有没有办法让这个代码在窗口大小变化时起作用？

4

2 回答 2

2

试试这个

$(document).on('ready', function() {

    $(window).on('resize', function() {

         // Stuff in here happens on ready and resize.

    }).trigger('resize'); // Trigger resize handlers.       

});//ready

来源

于 2013-05-21T12:46:56.090 回答
1

我不确定我是否正确理解了您的问题，但我可以建议一个“免费的 javascript”解决方案。

如果您的 html 看起来像这样：

<div id='banner'>
    <img src='http://placehold.it/1500x300'/>
     <div id='logo'>logo</div>
</div>

然后，您可以将您的徽标放置在横幅 img 的顶部，如下所示：

#banner {
    position: absolute;
}
#banner img {
    max-width: 100%;
    display: block;
}
#logo {
    height: 50px;
    width: 50px;
    background: #cff;
    position: absolute;
    left: 20px;
    top: 50%; 
    z-index: 1;
    margin-top: -25px;
}

这是假设您的徽标具有您事先知道的固定大小，但我认为这是一个安全的假设......

“魔法”发生在 css 的最后两行。通过将顶部设置为 50%，它将使徽标的顶部与横幅的中心对齐。由于横幅与其包含的图像大小相同，这意味着徽标现在与横幅图像的中心对齐。现在在 logo 上设置一个上边距，负一半的高度，将它向上推 50%，从而将 logo 的中心与横幅图像的中心对齐。

我希望这是有道理的。如果您希望我为您的用例更具体，请随时询问您是否需要任何进一步的解释，或者发布一些 html/css。

我设置了一个小小提琴来演示：http: //jsfiddle.net/pePSZ/

于 2013-05-21T21:41:55.327 回答