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..!