jQuery: как разместить изображение?

Question

У меня есть это:

function startLoad(object_id) {
$j('div#'+object_id).addClass('currently-loading');
var con = $j('div#overlay');
var img = $j('div#loadimg');
var tab = $j('table.app');
con.height(tab.height() - 30);
con.width(tab.width());
con.css('display', 'block');

img.css('margin-left', (con.width() / 2 - 36) + 'px');
img.css('margin-top', (con.height() / 2 - 36) + 'px');
//alert( (con.width() / 2 - 36)+" "+(con.height() / 2 - 36))

}

, и когда я раскомментирую предупреждение, оно показывает правильные размеры ... Я попробовал left, margin-left, ибез пикс.(некоторые для верха)

что я делаю не так?

все работает, кроме img в верхнем левом углу div, в котором он находится.

Answer 1

Я только что опубликовал ответ на тот же вопрос здесь .

[ Посмотреть в действии ]

HTML

<div id="overlay">
  <img src="http://www.sanbaldo.com/wordpress/wp-content/bigrotation2.gif" 
    id="img-load" />
</div>

CSS

#overlay { 
  display:none; 
  position:absolute; 
  background:#fff; 
}
#img-load { 
  position:absolute; 
}

Javascript

$t = $("#table"); // CHANGE it to the table's id you have

$("#overlay").css({
  opacity : 0.5,
  top     : $t.offset().top,
  width   : $t.outerWidth(),
  height  : $t.outerHeight()
});

$("#img-load").css({
  top  : ($t.height() / 2),
  left : ($t.width() / 2)
});

Тогда, когда вы загружаете вещи, вы просто говорите:

$("#overlay").fadeIn();

А когда ты закончил

$("#overlay").fadeOut();

Answer 2

для использования слева и сверху вам нужно расположить изображение абсолютно.

position:absolute;

также элемент контейнера должен иметь позицию: относительный;установите на него

, используйте это и попробуйте top, left вместо margin-top и margin-left в вашем коде;