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();
});

<img/>画像（ ）を除き、Webkitブラウザ（ChromeとSafari）でのみ、クラス「vAlign」または「hAlign」、あるいはその両方を使用して、任意のコンテナ（「position：relative」を持つ）に関連するすべてのものを正常に中央に配置しました。これは、この例では、

<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のことを知らないので、これがばかげた質問であるなら許してください。

前もって感謝します！

4

1 に答える 1

0

画像の幅と高さを測定するには、画像が適切にダウンロードされていることを確認する必要があります。

次の 2 つの解決策があります。

  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 に答える