Question

我有一个特别的理由将我的徽标放在横幅上，我的徽标有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%，我正在使用jQuery的height()来获取它的高度并将其除以2，以便我可以使用它来将我的徽标放在顶部。到目前为止我很成功，但问题是它恰好按时发生，当我重新调整浏览器时，我看不到值的变化。

有没有办法让这段代码能够改变窗口大小？

Answer 1

试试这个

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

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

         // Stuff in here happens on ready and resize.

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

});//ready

Source

Answer 2

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

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

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

然后，您可以将徽标放在横幅上方，如下所示：

#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％，它将使徽标的顶部与横幅的中心对齐。由于横幅与其包含的图像具有相同的大小，这意味着徽标现在与横幅图像的中心对齐。现在设置徽标的上边距，负高度的一半，将其向上推50％，从而将徽标的中心与横幅图像的中心对齐。

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

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

动态定位与另一个元素相关的绝对元素

2 个答案: