JQuery: центрирование изображений в div

Question

сообщество!

Я пытался центрирования изображения в пределах 3 отдельно дивы и тот код, который я придумал до сих пор:

$(document).ready(imgresize); 
$(window).on('resize',imgresize); 

function imgresize() { 

var rk = $(".rk").css('width').replace(/[^-\d\.]/g, ''); 
var img = $("img").css('width').replace(/[^-\d\.]/g, ''); 
var calc = (img - rk)/2; 
var calc2 = calc - (calc * 2) + 'px'; 

$("img").css('margin-left', calc2); 
} 

Он принимает текущую ширину изображения-обертки (например, 200px) , Затем он принимает ширину самого изображения (например, 180 пикселей).

выполняет некоторые математические вычисления, и в конце концов он имеет 20 пикселей, и разница в нем составляет половину, а в качестве значения поля для центрирования изображения требуется половина.

Это прекрасно работает, но есть только одна проблема. Если у меня есть 3 разных изображения, все они имеют разную ширину, то эта функция принимает ширину только одного изображения и дает другим двум слишком малое или слишком большое преимущество.

Это то, что HTML выглядит следующим образом:

<div id="content-wrapper"> 
    <div class="rk"> 
     <img src="img_1.jpg"> 
    </div> 
    <div class="rk"> 
     <img src="img_2.jpg"> 
    </div> 
    <div class="rk"> 
     <img src="img_3.jpg"> 
    </div> 
</div> 

Спасибо за любую помощь заранее! -Томас

---

EDIT: пример задачи:

http://jsfiddle.net/R9eZu/3/

Единственное, что мне действительно нужно знать, как отделить функции для каждого IMG и его контейнера. Возможно, это работает с «.this»? - К сожалению, я действительно новичок в JQuery/JavaScript :)

---

EDIT 2: лучше understandig:

Изображения должны пропорционально заполнить свои контейнеры - до этого момента не его проблемы. Теперь я хочу изменить каждое изображение внутри своего контейнера на индивидуальное значение, чтобы изображения были по центру горизонтально. Например:

-image container width: 200px 
    -img1w: 300px 
    -img2w: 240px 
    -img3w: 420px 

    ... calculation is: (imgwidth - containerwidth)/2 ... 

    img1 would be shifted 50px, 
    img2 would be shifted 20px, 
    img3 would be shifted 110px. 

Answer 1

Использование foreach для соединения в классе. Я thisk это то, что вы попросили

function imgresize() { 
    $(".rk").each(function (index, data) {  
     var rk = $(this).width(); 
     var img = $(this).find(">:first-child").width(); 
     var calc = (img - rk)/2; 
     var calc2 = calc - (calc * 2) + 'px'; 
     $(this).find(">:first-child").css('margin-left', calc2); 
    }); 
} 

http://jsfiddle.net/R9eZu/5/