each() not working as expected

each() not working as expected

Base on on the height ( variable) of the image(s), css property (position/left/top) is being assigned to position it center (vertical & horizontal) within a <div> with in a fixed height.

Class assigned to <div> = .imageContainer 


<script>
$ ( document ).ready (function () {

  $ ( ".imageContainer img" ).each (function () {
 
$ ('.imageContainer img').css ({
position :'absolute',
left : ($ ('.imageContainer').width () - $ ('.imageContainer img').outerWidth ())/ 2 ,
top : ($ ('.imageContainer').height () - $ ('.imageContainer img').outerHeight ())/ 2
}) ;

  });

}) ;
</script>


HTML Structure:

<ul>

  <li>
    <div class="imageContainer"> <img alt="ChicagoDanielSilva1" src="images/ChicagoDanielSilva11-180x88.jpg"> </div>
    <h3>AMIT CHICAGO DANIEL SILVA EVENT</h3>
  </li>
    
  <li>
    <div class="imageContainer"> <img  alt="ChicagoDanielSilva1" src="images/DanielSilvaLABookEvent-142x200.jpg"> </div>
    <h3>AMIT CHICAGO DANIEL SILVA EVENT</h3>
  </li>
  
  <li>
    <div class="imageContainer"> <img alt="ChicagoDanielSilva1" src="images/Florida15Grandmothers-143x200.jpg"> </div>
    <h3>AMIT CHICAGO DANIEL SILVA EVENT</h3>
  </li>

</ul>



For the first <div> & <img> the value is perfect, but for the rest, the same  value  of the  position is getting assigned. Rather it should calculate unique  value   position for each <img> items, as the dimension of the image will vary.

Any suggestion on above will be appreciated... Thanks in Advance..!