2015-02-02 2 views
0

У меня есть сценарий jQuery, который центрирует div по вертикали. Похоже, что он выполняет работу во всех браузерах, но в FireFox. Когда я обновляю экран, div-центры по назначению.Содержимое вертикального центра jQuery и FireFox

$(document).ready(function() 
{ 
    centerContent(); 
}); 


$(window).load(function() 
{ 
    centerContent(); 
}); 

$(window).resize(function() 
{ 
    centerContent(); 
}); 

function centerContent() 
{ 
    var height = $(document).height(); 
    var divHeight = $('#wrapper').height(); 
    var lNavHeight = $('#lNav').height(); 
    var diff = height/2 - divHeight/2; 
    $('#wrapper').css({"position": "relative", "top": diff}); 
    $('#lNav').css({"position": "absolute", "bottom": 45}); 
    $('#rNav').css({"position": "absolute", "bottom": 45, "right": 5}); 
} 
+0

Подобно тому, как в стороне, если вы звоните centerContent на различных мероприятиях вы можете свяжите их в один проход в jquery. $ (window) .on ("load resize", function() { centerContent(); }); – lharby

+0

И вы должны иметь возможность выровнять что-то центрально и вертикально в почти всех браузерах только с помощью css. – lharby

+0

Возможно, если вы поместите свой код в jsfiddle, сообщество может помочь (включая меня). http://jsfiddle.net/ – lharby

ответ

1

Лучше использовать чистый CSS решение, как это (не забудьте добавить префиксы):

body { 
 
    margin: 0 
 
} 
 
#wrapper { 
 
    height: 100%; 
 
    width: 100%; 
 
    position: fixed; 
 
    z-index: 999; 
 
    display: flex; 
 
    align-items: center 
 
} 
 
#content { 
 
    flex: 1; 
 
    text-align: center; 
 
}
<div id="wrapper"> 
 
    <div id="content">CENTERED CONTENT</div> 
 
</div>

Смежные вопросы