gpt4 book ai didi

javascript - 使用 jQuery 动态地垂直和水平居中 div

转载 作者:太空宇宙 更新时间:2023-11-04 13:46:23 25 4
gpt4 key购买 nike

我需要将一个名为 ".box" 的 div 垂直和水平居中里面<body></body> .它包含一个 <h1> , 就这样。将来,它可能包含一个<img>。 .

我尝试了很多技巧来做到这一点,但不幸的是它并不奏效......

所以我发现了这个话题:Centering a div vertically & horizontally using jQuery jQuery 的解决方案。但它并不完美,因为 div 停留在屏幕的左侧,如您所见:http://www.arcadmedia.com/

所以我正在寻找解决方案(在 jQuery 或 CSS 中,但对我来说没有任何效果)。

我认为这样的解决方案:http://jsfiddle.net/pqDQB/都不是最好的,jQ 可以做得更好。

我只是在使用这段代码:

$(function() {
$('.box').css({
'position' : 'absolute',
'left' : '50%',
'top' : '50%',
'margin-left' : -$('.box').outerWidth()/2,
'margin-top' : -$('.box').outerHeight()/2
});
});

真不知道是哪里出了问题。

编辑:该框必须动态适应其内容!

最佳答案

这将动态计算并将 .box 定位在屏幕的中心。您还可以在 resizerotate 事件上调用此函数。

$(updateBoxDimension);
$(window).on('resize', updateBoxDimension);

function updateBoxDimension() {
var $box = $('.box');

// To center the box
var boxLeft = ($(window).width()) / 2 - ($box.width() / 2),
boxTop = ($(window).height()) / 2 - ($box.height() / 2);

$box.css({
left: boxLeft,
top: boxTop
});
}

演示:https://jsfiddle.net/tusharj/a5Lpeoux/1/

关于javascript - 使用 jQuery 动态地垂直和水平居中 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30167895/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com