Jquery：以编程方式居中元素

Posted 2023-03-05

【中文标题】Jquery：以编程方式居中元素

【英文标题】：Jquery: programmatically center elements

【发布时间】：2011-06-14 23:57:10

【问题描述】：

我正在尝试创建一个可以应用于 div 的函数，并让该 div 在其父级中居中，无论是垂直还是水平。

我正在尝试使居中的功能变得通用，这样我就不必继续重写居中的代码了。

您将如何使用 JQUERY 使居中变得最简单。

$('p').hoverIntent(function () 
    var myObject = $('#bThis')
    var Ctop = $(this).offset().top + ($(this).height() / 2) - (myObject.outerHeight() / 2)     
    var Cleft = $(this).offset().left + ($(this).width() / 2) - (myObject.outerWidth() / 2)     

    if ($('#placeB').hasClass('place'))     
        $(this).animate(color: "#999999", backgroundColor: "#f5f5f5", 400)
        $('#bThis').css('left':Cleft, 'top':Ctop).fadeIn(200)
    

, function() 
        $(this).stop().animate(color: "#333", backgroundColor: "#fff", 200)
        $('#bThis').fadeOut(200)
);

【参考方案1】：

编辑：

查看工作示例here。

<div id="container">
    <div id="element">
        &nbsp;
    </div>
</div>

 <style>
  #container
    height:100px;
    width:100px;
    border:1px solid #000;
    background:#EEE;
    position:relative;
  
  #element
    height:50px;
    width:50px;
    border:1px solid #000;
    background:#333;
    position:relative;
  
<style>

<script>
  function centerDiv(element, xPosFromCenter, yPosFromCenter)

    var xPos = parseInt(element.parent().css('width'))/2 -parseInt(element.css('width'))/2 - xPosFromCenter;

    var yPos = parseInt(element.parent().css('height'))/2 -parseInt(element.css('height'))/2 - yPosFromCenter;


    element.css(top: yPos, left:xPos);
  

  $().ready(function()
    centerDiv($('#element'), 0, 0);        
  );
<script>

编辑结束

那么，将“居中”的工作委派给它自己的功能不就行了吗？

function centerDiv(element, parent)
  var Ctop = $(element).offset().top + ($(element).height() / 2) - (parent.outerHeight() / 2)
  var Cleft = $(element).offset().left + ($(element).width() / 2) - (parent.outerWidth() / 2) 

return ctop: Ctop, cleft:Cleft;

在你的调用函数中..

.
.
.
var obj = centerDiv($(this), $('#bThis'));
$('#bThis').css('left':obj.cleft, 'top':obj.ctop).fadeIn(200);
.
.
.

【讨论】：

非常好，这就是我想要的。没有尝试过，但看起来它会工作。嘿，如果不是太麻烦，我怎么能从中心添加偏移量？所以如果我希望元素从父元素的中心向上 -100px，我将如何制作它以便在我调用函数时进行设置？所以它是动态的，我可以为我需要的每一种情况定制它？是否有您个人推荐的 jquery 教程/学习网站，或者没有？再次感谢伙计。

@nick：我可以建议绝对定位吗？在具有相对定位的 div 中使用绝对定位时.. 您始终可以指定 top:X px。其中 X = (ContainerDiv 的高度/2) - 100

@nick：查看我的编辑。传递 0, 0 会给你确切的中心。至于 jQuery 教程，网络上有大量内容，提出任何建议都会令人生畏……除了说“走出去探索什么适合你的需要，什么不适合”。 :) 祝你好运！

嘿，非常感谢您的帮助，我编辑了您的示例：jsfiddle.net/kE9xW/1 并且想知道您是否知道如何修复它，基本上如果我有超过 1 个容器和元素，那么它只适用到第一个。我知道在函数结束时你必须做一些事情才能让它重新开始并寻找下一个......我想......但我不知道是什么而且我还没有找到它所以我想我会问。

首先，你有重复的 id's.. jsfiddle.net/kE9xW/6 至于，递归居中.. 嗯.. 你需要对你的标记的样子有一些“预知”..否则就像打开一罐蠕虫..