Jquery：以编程方式为中心元素

Question

我正在尝试创建一个可以应用于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)
});

Answer 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);
.
.
.