对齐背景图像中间和中心

这是html：

这是css：

 .gallerybox {width:200px;height:200px;overflow:hidden;} 

任何人都可以告诉我一种方法来对齐div.gallerybox中间（垂直）和中心（horizo​​ntaly）内的链接图像？ 也许使用javascript，jQuery或只是简单的CSS？

Answer 1

可能类似于以下内容：

 
  " />  
 .gallerybox { width:200px; height:200px; overflow:hidden; }   

Answer 2

jackson。 我将推荐一些HTML重写，我理解这可能是不可能的，但我认为这可能是解决您问题的最有效方法。

使用该数据库编码创建隐藏图像：

 img#imgUtility { display: none; } 

（CSS和HTML）

然后在页面加载并且图像已解析为实际URL后，您可以在发布的HTML中用替换 ，使用它的内联style将隐藏标记src设置为的背景图像属性通过JavaScript：

 // galleryBoxLinkTarget should be a reference to the  in a div.galleryBox function imgReplacement(galleryBoxLinkTarget) { var span = document.createElement("span"); var img = document.getElementById("imgUtility"); span.style.backgroundImage = "url('" + img.getAttribute("src") + "')"; span.className = "imgReplacement"; galleryBoxLinkTarget.appendChild(span); } 

（JavaScript和HTML）

然后做一些聪明的CSS：

 span.imgReplacement { display: block; background-position: 50% 50%; background-repeat: no-repeat; width: 200px; height: 200px; } 

无论尺寸如何，这都应使图片居中，并允许您删除内联width和height属性。 希望这对你有用！

Answer 3

试试这个：

Answer 4

使用一个名为center的简单JQuery fn（用法：$（元素）.center（））：

  jQuery.fn.center = function() { this.css("position","absolute"); this.css("top", (($(window).height() - this.outerHeight()) / 2) + $(window).scrollTop() + "px"); this.css("left", (($(window).width() - this.outerWidth()) / 2) + $(window).scrollLeft() + "px"); this.css("bottom", (($(window).width() - this.outerWidth()) / 2) + $(window).scrollLeft() + "px"); return this; } $(document).ready(function(){ $(#imgUtility).center(); )}; 

使用HTML：

 
  " />