Question

我有一个为jquery添加居中能力的功能。当应用于带有文本的div时，它可以找到。但是当设置背景时它不起作用。我做错了什么？

<div id='target'></div>

$.fn.center = function() {
    this.css("position", "absolute");
    this.css("top", Math.max(0, (($(window).height() - $(this).outerHeight()) / 2) + $(window).scrollTop()) + "px");
    this.css("left", Math.max(0, (($(window).width() - $(this).outerWidth()) / 2) + $(window).scrollLeft()) + "px");
    return this;                
}

var i ='https://www.google.com/logos/doodles/2016/googles-18th-birthday-5661535679545344-hp.gif'

var backgroundimage = "url('" + i + "') no-repeat";

//this doesn't
$("#target").parent().css('background', backgroundimage);

//this works
//$("#target").text('hi');

$("#target").center(true);

Answer 1

背景图片不会自动为div提供宽度和高度，您必须手动设置它才能使中心功能正常工作。

另外，你设置了div的父级的背景，而不是div本身的背景，之后你试图将空的div居中，这显然没有明显的效果

Answer 2

此代码始终适用于我：

$('#yourimage').css({'top':'50%','left':'50%','margin':'-'+($('#yourimage').height() / 2)+'px 0 0 -'+($('#yourimage').width() / 2)+'px'});

使用jquery将屏幕中心的div设置为背景图像

2 个答案: