放圖像，其中圖像是絕對位置

Question

<div class='img-box'> 
<img /> //position absolute 
<img /> //position absolute 
<img /> //position absolute 
<img /> //position absolute 

在此代碼我希望把圖像中的DIV中心，但它沒有來中心對齊，由於圖像的絕對位置， 所以，請幫我把這個圖像放在div的中心。 請幫我

Answer 1

首先，將div設置爲position:relative。
其次，添加以下代碼：

$(document).ready(function(){ 
    var div_height = $(".img-box").height(); 
    var div_width = $(".img-box").width(); 
    $("img").each(function(){ 
     $(this).css({ 
      "top": (div_height-$(this).height())/2+"px", 
      "left": (div_width-$(this).width())/2+"px" 
     }); 
    }); 
}); 

要居中的元件相對於父，子元件的寬度必須被從父的寬度中減去。在將此結果除以2之後，您就知道孩子的期望偏移（相對於父項）。

Answer 2

，如果你知道IMG的寬度和高度，你可以設置top and left 50%保證金：-imgHeight/2 0 0 -imgWidth/2

Answer 3

你可以做到這一點在CSS：

.img-box img { 
    position:relative; 
    margin: auto; 
    display:block; 
} 

如果你已經有位置：絕對適用於您的IMG節點可能意味着你有其他奇怪的CSS來彌補它。

雖然如果您的目的是讓圖像互相疊加顯示，這不是解決方案，但您的問題並不清楚。

Answer 4

in css： image {
position：relative;
剩餘：50％;
}

如果圖像沒有排列在彼此之上，我只會將它們放在一個較小的div內，寬度設置爲與圖像寬度相同，因此第二個圖像被強制顯示在下面而不是旁邊。然後將第二個div設置爲使用'left：50％'顯示在父窗口的中心位置

可能不是最好的方法，但可能我會這樣做。