我正在使用以下脚本将主要内容 div 居中在查看区域的中心,这在页面加载或页面调整大小时似乎工作得很好,但是当页面刷新时,内容 div 会下降到左侧页。
按下刷新后可以在此处看到问题:
http://www.twin-focus-photography.co.uk/
<script>
$(document).ready(function(){
var positionContent = function () {
var width = $(window).width(); // the window width
var height = $(window).height(); // the window height
var containerwidth = $('.container').outerWidth(); // the container div width
var containerheight = $('.container').outerHeight(); // the container div height
$('.container').css({position:'absolute',
left: ($(window).width() - $('.container').outerWidth())/2,
top: ($(window).height() - $('.container').outerHeight())/2 });
};
//Call this when the window first loads
$(document).ready(positionContent);
//Call this whenever the window resizes.
$(window).bind('resize', positionContent);
});
</script>
编辑>>>>>>>>>>>
好的,我现在已经根据一些建议进行了编辑,现在看起来像这样:
<script>
$(document).ready(function(){
var positionContent = function () {
var width = $(window).width(); // the window width
var height = $(window).height(); // the window height
var containerwidth = $('.container').outerWidth(); // the container div width
var containerheight = $('.container').outerHeight(); // the container div height
$('.container').css({position:'absolute',
left: ($(window).width() - $('.container').outerWidth())/2,
top: ($(window).height() - $('.container').outerHeight())/2 });
}
});
$(document).ready(function(){
//Call this when the window first loads
$(document).ready(positionContent);
//Call this whenever the window resizes.
$(window).bind('resize', positionContent);
});
</script>
但是,如果我调整页面大小,这仍然无法刷新页面......它在第一次加载时工作......它工作,点击 f5 并且它向左倾斜并停留在那里。