Question

家伙！这是我的第一个问题。我收集了这个小脚本，只需使用一个类就可以同时水平和垂直居中。

(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”或两者相对于任何容器（具有“position：relative”）成功地集中任何一个，除了图像（<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”的标签（甚至“输入”或“按钮”）也是如此。但是，img不会以webkit浏览器为中心。

我到处都看，但是，我找不到答案，或者我不明白。我基本上不知道JS，所以请原谅我这是一个愚蠢的问题。

提前致谢！

Answer 1

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

有两种解决方案：

您可以等待窗口加载事件等待下载所有文件： window.onload vs document.ready jQuery
```
$(window).on('load', function(){
  ...
});
```
有“imagesLoaded”插件可以帮助您解决此问题。它不需要jQuery并允许等待加载单个或多个图像： http://desandro.github.io/imagesloaded/
```
$.fn.vAlign = function(){
  this.imagesLoad().always(function(){
    ...
  });
  return this;
};
```

如何确定webkit Chrome和Safari浏览器的图像高度和宽度？

1 个答案: