1

伙计们！这是我的第一个问题。我收集了这个小脚本，它只使用一个类就可以同时水平和垂直居中元素。开始

(function ($) {
$.fn.vAlign = function() {
return this.each(function(i){
var h = $(this).height();
var oh = $(this).outerHeight();
var mt = (h + (oh - h)) / 2;
$(this).css("margin-top", "-" + mt + "px");
$(this).css("top", "50%");
$(this).css("position", "absolute");
});
};
})(jQuery);

(function ($) {
$.fn.hAlign = function() {
return this.each(function(i){
var w = $(this).width();
var ow = $(this).outerWidth();
var ml = (w + (ow - w)) / 2;
$(this).css("margin-left", "-" + ml + "px");
$(this).css("left", "50%");
$(this).css("position", "absolute");
});
};
})(jQuery);

$(document).ready(function() {
$(".vAlign").vAlign();
$(".hAlign").hAlign();
});

我已经成功地使用类“vAlign”或“hAlign”或两者都相对于任何容器（具有“位置：相对”）居中，除了图像（<img/>）和仅在 webkit 浏览器（Chrome 和 Safari）上。这意味着，在这个例子中；

<div class="hAlign vAlign">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eu dui eget nulla condimentum gravida. Vivamus erat leo, ultricies quis, gravida a, fringilla eu, urna. Pellentesque a mauris ac nisl semper egestas. Pellentesque ut elit in pede mattis gravida. Donec ac lectus a nisi suscipit placerat. Maecenas quis ipsum. Pellentesque mattis tellus. Suspendisse sollicitudin accumsan tortor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed metus. Quisque et leo at erat rutrum lobortis. In tempus lectus eget ligula convallis tristique.
</div>

<img class="hAlign vAlign" src="http://rlv.zcache.es/cara_de_lol_etiquetas_redondas-p217382006305499446envb3_400.jpg" alt="lol" />

div 将在任何浏览器上水平和垂直居中，任何其他不是“img”的标签（甚至是“input”或“button”）也是如此。但是，img 不会以 webkit 浏览器为中心。

我到处寻找，但要么我没有找到答案，要么我不明白。我基本上不知道 JS，如果这是一个愚蠢的问题，请原谅我。

提前致谢！

4

1 回答 1

0

要测量图像的宽度和高度，您必须确保正确下载了图像。

有两种解决方案：

  1. 您可以通过等待窗口加载事件来等待下载所有文件： window.onload vs document.ready jQuery

    $(window).on('load', function(){
  ...
});

  2. 有一个“imagesLoaded”插件可以帮助您解决这个问题。它不需要 jQuery，并允许等待加载单个或多个图像：http: //desandro.github.io/imagesloaded/

    $.fn.vAlign = function(){
  this.imagesLoad().always(function(){
    ...
  });
  return this;
};
于 2013-06-11T08:09:55.373 回答